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 Loca