One of the biggest announcements for developers at Dreamforce 2024 was Local Dev (beta), a new feature for developing Lightning web components (LWCs) faster. Typically, to view how your LWC changes look and behave, you deploy them to your org and refresh the whole page to see the changes. With Local Dev, you can now get a fully working local preview of your components — just by saving your code. This means that you can save three to 10 seconds of wait time per component update, which quickly converts into hours saved when you spend days working on LWC development, thus increasing your productivity. In addition, Local Dev works across various Salesforce containers, such as Lightning Experience, LWR sites for Experience Cloud, and the Salesforce mobile app.

In this post, we’ll look at how you can set up Local Dev, how it works behind the scenes, and how to launch it for different experiences.

How to set up Local Dev

Local Dev is integrated into the regular Salesforce development experience; it’s installed as a Salesforce CLI plugin. You can enable it in sandboxes and scratch orgs by activating it from the Setup menu or by adding the enableLightningPreviewPref setting on your scratch org definition file. Be sure to update the Salesforce CLI to the latest version and follow the instructions in Local Dev (beta) to activate it.

How Local Dev works behind the scenes

Remember the old LWC Local Development Server? Then forget about it, because the Local Dev architecture is completely new and it replaces this old tool.

When you start Local Dev:

1. The Salesforce app is loaded from the remote app server on a browser or a Salesforce mobile app emulator (virtual mobile device) in a special dev preview mode that contains a Hot Module Replacement (HMR) client.*
2. Your local environment is provisioned with a dev server. Because the dev server is provisioned in your local environment, it can monitor your changes to your LWC code.
3. The browser or mobile emulator and the dev server establish a two-way authenticated communications channel using a WebSocket.

* In the case of Experience Cloud sites, these are served from localhost.

On the initial page load, and when your code changes:

1. The dev server compiles the changed LWCs (watch this video if you don’t know how LWC compilation works).
2. The dev server pushes the compiled changes to the browser or mobile app over the WebSocket channel via Hot Module Replacement APIs. A full reload of the page does not happen, which means that the page state is preserved. This is an important benefit of the feature because you also save the time that it takes to refresh and render the whole page, and to click through it until you see the component in the state you need it to be.
3. HMR activity is logged to the browser’s console.

Note: there are some edge cases in which modules are not hot-swappable and you need to deploy your changes manually. We’re working on automating this for the next release. Take a look at the considerations and limitations to see a full detailed description of the changes supported.

How to launch Local Dev

As of today, you launch Local Dev from the terminal. The following are a few ways to do so.

• For a Lightning Experience app:

sf lightning dev app -n "Coral Cloud Resorts App" // Where -n, the Lightning app name, is optional

• For a mobile app running on an Android emulator or iOS simulator:

sf lightning dev app -t android
sf lightning dev app -t ios

In this case, you can optionally set a virtual device ID with -i, which by default is the first available one.

• For an Experience Cloud LWR site:

sf lightning dev site -n "Coral Cloud Resorts Experience Cloud Site" // Where -n is the site name

Learn more

In this blog post, you have learned about the new Local Dev experience (beta), which allows you to preview your code changes in real time without having to deploy them and refresh, resulting in a much faster and more efficient developer experience. Local Dev is planned to become GA for Lightning Experience and Mobile in the Spring ’25 release, while the GA for Experience Cloud LWR Sites is planned for the Winter ’25 release (safe harbor).

Local Dev is a game changer for Salesforce developers, as the time that you save when using it increases exponentially with the number of code changes you perform. Launch Local Dev seamlessly from the Salesforce CLI and works for Lightning Experience, LWR sites for Experience Cloud, and the Salesforce mobile app.

To learn more, watch the following videos:

• Dreamforce ’24: Developer Keynote: Build the Future with the Platform
• Dreamforce ’24: LWC and Mobile: What’s New and What’s Coming.
• Dreamforce ’24: Improve LWC Developer Productivity with Local Preview

If you have feedback or questions about Local Dev, post them in the LWC Trailblazer Community group and use the hashtag #LWC Local Development.

Thank you to our contributors

This post would not have happened without contributions from these amazing individuals (listed in alphabetical order): Ananya Jha, Christie Fidura, David Ou, Diana Widjaja, Eric Engelking, Greg Whitworth, Grisha Lyukshin, Irfan Syed, Jacqueline Moore, Jennifer Mills, Jia Zheng, Juliet Shackell, Kang Hou, Karen Fidelak, Kevin Hawkins, Laura Pomerleau, Matt Wimmer, Marcelino Llano, Mark Vogelgesang, Meisam Seyed Aliroteh, Mohammed Abdul Sattar, Nathan Khuu, Nicolas Kruk
Rakshit Verma, Raj Sensharma, Ravi Jayaramappa, Ryan Schellack, Stephan Chandler-Garcia, Sue Berry, Takashi Arai, and Qoratia Parmanand.

About the author

Alba Rivas works as a Principal Developer Advocate at Salesforce. You can follow her on GitHub or LinkedIn.