LWC Local Development in Salesforce

Lightning Web Components (LWC) local development lets us build, preview and test components on our machine with no deployments required. By installing the official Salesforce CLI plugin, enabling Local Dev in the org and running a simple preview command, we will be able to see live changes as we update our LWC component code.

In this blog, we will discuss:

• Installing the Local Dev plugin
• Enabling Local Dev in a Developer Edition org
• A use case scenario
• A minimal “helloUser” example to implement quickly
• Commands to preview the component locally

Install the LWC Local Development Server Plugin

The Local Dev functionality is provided by the bundled Salesforce CLI plugin @salesforce/plugin-lightning-dev. We can install or update it with the following command:

sf plugins install @salesforce/plugin-lightning-dev 

OR

sf plugins install @salesforce/plugin-lightning-dev@latest

This command downloads and installs the LWC Dev Server plug-in into the CLI. (We use the new Salesforce CLI sf instead of sfdx). After installation, we should see output confirming the plug-in was installed successfully.

Note: We will need the Salesforce CLI already installed on our machine. If we see any installation errors (for example, due to Node.js version), follow the error message hints or see Salesforce’s documentation for troubleshooting.

If we already have a version of the plugin and want to ensure we are on the latest release or not, we will first need to update the CLI:

sf update

This updates the Salesforce CLI core to its newest version before installing or upgrading plugins.

Enable Local Development in Developer Edition Org

Local development must be enabled in the Salesforce org before we perform preview components using local dev. You can enable it following the below mentioned steps:

1. Log in to the Developer Edition org in a browser.
2. Go to Setup, then enter Local Dev in the Quick Find box.
3. Click Local Dev in the results, and then click the Enable Local Dev toggle or button.

This exposes the Local Development API endpoints our CLI uses that we can easily perform through our LWC components.

This turns on the Local Development feature for our org developer.salesforce.com. (In Salesforce terms, Developer Edition is treated as a production org, so the same setting applies.) Once enabled, we will be ready to work with the org with the LWC Local Development.

Below is the screenshot where we can see it’s enabled in our org:

Example: Live Local Dev Testing Component

As a simple use case, imagine we want a component that shows the updated values from the component to the UI without deploying our code again and again, updating the UI as we type in the component. Local development makes this feedback instant and easy to test. For example:

• The component has a text input labelled “To test local dev”.
• As we update the component and just add some more text, the UI will display “To test local dev…” the updated text quickly.
• With the local server running, this UI will update in real time as we change the code or the input value.
• This workflow is ideal for UI components where rapid feedback is crucial while we are doing our development.

This immediate feedback is a key benefit. We can see the effect of every edit or keystroke in the browser without waiting for a full Salesforce deploy or manually refreshing the page.

Create the helloUser LWC Component

In our Salesforce DX project (any existing SFDX project with a force-app/main/default/lwc folder), create a new Lightning web component named helloUser. This will generate three files: helloUser.html, helloUser.js, and helloUser.js-meta.xml. Below is a simple example with implementation:

<!-- helloUser.html -->
<template>
<div>
{testLocalDev}
</div>
</template>

// helloUser.js
import { LightningElement } from 'lwc';
export default class HelloUser extends LightningElement {
testLocalDev ='To test local dev...';
}

<!-- helloUser.js-meta.xml -->
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloUser">
<apiVersion>63.0</apiVersion>
<isExposed>true</isExposed>
<!-- Optionally specify where this can be used -->
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

Here is the actual implementation below for above written logic from the LWC component:

The above functionality will work properly without any issues in production and sandboxes, but scratch orgs will need to perform below task as well to make it work smoothly.

To enable Local Dev for our scratch org, make sure to complete these steps:

1. In our SFDX project, open the file config/project-scratch-def.json.

2. In the settings section of the file, add the key “enableLightningPreviewPref” and set it to true, like the below:

{
"orgName": "My Company",
"edition": "Developer",
"features": ["EnableSetPasswordInApi"],
"settings": {
"lightningExperienceSettings": {
"enableS1DesktopEnabled": true,
"enableLightningPreviewPref": true
},
"mobileSettings": {
"enableS1EncryptedStoragePref2": false
}
}
}

Also Read – How to use NavigationMixin in LWC in Salesforce

Local development for Lightning Web Components offers several key advantages:

1. Instant Feedback: Developers can be able to see UI and code changes in real time without repeated deployments.
   
2. Faster Iteration: Editing HTML, JavaScript, or CSS updates the browser preview immediately, accelerating design and debugging cycles.
   
3. Offline Capability: After initial setup, components can be built and tested without constant connectivity to a Salesforce org.
   
4. Browser Tool Integration: Standard dev tools like Chrome DevTools work seamlessly, enabling network, performance, and accessibility checks.
   
5. Reduced Deploy Time: Eliminates the overhead of metadata push and page refreshes, freeing up time for actual development.
6. Improved Productivity: By minimizing wait cycles, developers can focus on functionality and user experience more efficiently.

Conclusion

Lightning Web Components local development transforms the way developers build and refine Salesforce user interfaces by removing repetitive deployment steps and enabling real-time previews. With the Local Dev enablement, every change to HTML, JavaScript, or CSS instantly reflects in the browser window, slashing feedback loops from minutes to seconds. This immediacy accelerates design iterations, reduces context switching, and helps catch layout or logic issues early in the process. Offline support further enhances flexibility once the environment is initialised, we can be able to continue prototype work without live org connectivity. 

Get a complete Roadmap To Learn Salesforce Admin and Development

Name *

First

Last

Email *

Comment or Message

Submit