Salesforce Local Development is one of those hidden gems that has been overlooked for too long, so let’s go over how it works and how it can make developing Lightning Web Components faster. Although the feature is technically still in beta, it can be an extremely helpful way to jumpstart your Lightning Web Components, especially if you are just learning LWC, or you are flying home from Dreamforce and can’t wait another second to start prototyping a new component.
What Is Local Development?
Running your code on a Salesforce Local Development Server means your code is not hosted on Salesforce servers, but rather runs locally on your own computer. Therefore, it does not require an internet connection, and you will not need to push your code to a Salesforce org to see your component rendered. As soon as you save your code, your changes will be instantly visible.
This can drastically save you time, especially when formatting and positioning elements of the LWC, because there is no need to push the code and refresh the page to see your changes.
Why Use Local Development?
Let’s say I want to build a simple LWC to display an icon.
Approach #1 (without Local Development): I would need to spin up a scratch org, push my code to that org, create an app page, and then configure that page with the component I’ve just built. Then, I would need to repeat the processes of pushing my code and refreshing the page every time I want to see the changes I’ve made to the code.
Approach #2 (with Local Development): However, with Local Development installed, I can just right-click on my LWC in VS Code and preview this component locally.
I don't know about you, but approach #2 sounds easier to me.
Note: A setup guide can be found below.
Let’s See Local Development In Action:
To keep this demonstration simple, I’ve prepared an LWC that contains two base components. A lightning-radio-group and a lightning-icon that displays the selected option. Instead of pushing this code to a scratch org, I can easily test the functionality using the Local Development Server. The component quickly renders in a new browser tab, and I can start testing the component to make sure the correct icon appears for each option selected.
Style Quickly Using “Render-On-Save”
After testing the component’s functionality, I notice that the icon is not positioned very well. Traditionally, iterating on the layout consumes a lot of my time. But, with Local Development the component will re-render as soon as I hit save in VS Code. This allows me to make step-by-step improvements until I’m happy with the layout of the component.
Step 1. Center the components
Step 2. Add a box to make the icon pop
Step 3. Add the icon’s name
Sidenote: Don’t worry your console log isn’t going anywhere. You can still see any messages you publish to the console by inspecting the page your local developer server is running on.
Don’t Forget To Preview Your Component On Mobile, Too.
Developing components for a mobile experience is becoming increasingly important, and the Local Developer Server supports a simulator for both Android and iOS. In VS Code, just right-click on your component to preview it, and choose between a desktop or mobile experience.
Salesforce Data Available Via Proxy
Lastly, despite running locally, we can still access data in Salesforce (this will require internet access). By hard coding the record Id, we can access field values in Salesforce as needed for specified records. In this simple example the LWC displays the opportunity Name and Amount for the record provided. Javascript gains access to the opportunity data via the uiRecordApi and the wired getRecord method.
So Is Local Development Right For Me?
If you are new to LWC, then I would highly recommend using local development because of the instant feedback you’ll receive when you save your code. Although, as your code becomes more complex you are likely to hit some limitations. For example, lightning message service will throw an error, and nothing will happen if you are expecting a toast event. A complete list of limitations can be found here: https://developer.salesforce.com/tools/vscode/en/localdev/lwc-localdev-supported-modules
Setup Guide:
The hardest part of using Local Development is honestly just the setup process. I had to install Xcode as well as node-gyp before I could successfully install the lwc-dev-server plugin. The github repo is a great resource to follow for the latest updates and help with troubleshooting: https://github.com/forcedotcom/lwc-dev-server-feedback/issues
Sources:
Comments