How the New Local Dev Can Help With Your Salesforce LWC Development

Salesforce developers who have worked on LWCs extensively are familiar with the issue of deploying LWC to the org to preview it in Lightning Experience apps, Salesforce Mobile apps, and LWR Sites. Having to save the code, deploy the files, and refresh the page in the browser to see the changes can be very time-consuming. Now, imagine you are working on a complex LWC and you need to preview the component quite often – it becomes really annoying and boring.

In this article, I will explain how to save precious time and use it more productively, by previewing LWCs in Lightning Experience apps, Salesforce Mobile apps, and in LWR Sites by just saving the changes in the source code, without the need to deploy it and to refresh the page.

Note: LWC Local Development Server (Beta) will be deprecated and the new Local Dev experience, which we are discussing today, will replace it.

How Do You Set Up Local Dev?

You can set up Local Dev in Production orgs, Sandbox orgs (which are in the Winter ‘25 release), and Scratch orgs.

The process is almost the same as for other orgs, but scratch org has one extra step to enable Local Dev. For demoing Local Dev, I created a Dev org and enabled Dev Hub to create a scratch org.

Below are the steps on how to enable and test Local Dev in a Scratch Org. To follow my example, you will need to have installed Visual Studio Code (VS Code), Salesforce CLI, JDK, and Node.js.

How to Enable and Test Local Dev

• Create a scratch org and log in to the Scratch Org from VS Code
• Enable Local Dev in the Scratch org, from Setup to Local Dev.

• Create an App Page with App Builder and make it available for Sales app. You will be able to see the tab corresponding to your app page in the Sales app. This app will be a container for the LWC to be created in the next step.
• Prepare an LWC in advance, which you will use to test previewing with local dev:

• Deploy this LWC to the scratch org and insert it in the app page that you have created.
• In project-scratch-def.json File, assign the “enableLightningPreviewDef” to a boolean value: true. This step is an extra one for Scratch orgs, which I mentioned above.

• Install the plugin with this command from VS Code terminal: sf plugins install @salesforce/plugin-lightning-dev
• Run this command to start the dev server: sf lightning dev app.
• You will be prompted to choose which device type you want to preview LWCs. In this instance, select Desktop.
• You will be prompted to choose for which app you want to use the preview (Sales, Bolt, etc.). Choose Sales if you made your app page available for the Sales app (as mentioned in the third step).
• A separate tab should be opened in the browser.

You will see that a new tab will be opened in the browser. If you take a look at the URL closely, you will notice that it is similar to the scratch org’s URL, but not your actual scratch org.

It’s like a virtual instance of your scratch orgs. So when you save the new changes of LWC in your source code, they will be automatically reflected here, without needing to deploy and refresh the page.

However, the changes will not be reflected on the actual Scratch Org without deploying and refreshing the page where the LWC is.

It is also available to preview components on Mobile devices, but for that, you will need to install and configure a separate desktop app like Android Studio, for previewing on Android.

Limitations

The changes listed below do not automatically load in Local Dev preview, so they require deployment.

• Adding a new @api property or method to a component class.
• Making changes related to wire adapters, such as configuration updates, importing a new wire adapter, adding @wire to a property, and changing a GraphQL query.
• Importing new @salesforce scoped modules.
• Updating your .js-meta.xml file.
• Revising a service component library.

Summary

With the option to preview components with Local Dev, you should hopefully now save yourself a lot of development time.

I know that many Salesforce Developers are working on complex LWC projects that require building many components, and even small changes should be reviewed by a developer.

I’ve had many complex LWC projects in my career, and I can say that I was doing deployments and page refreshes maybe around 60 times per day – maybe more. But now, you can just save the changes, and when you are done with the development you can deploy the source to the org only once (besides doing deployments to higher environments, of course).

Make sure to leave your thoughts in the comments below!