Increase Productivity with Local Development for Lightning Web Components (Beta)

Lightning Web Components now offers Local Development so that you can build component modules and view your changes live without publishing your components to an org. Our new Salesforce CLI plugin lwc-dev-server configures and runs a Lightning Web Components-enabled server on your computer. You can access the local development server from the command line and the Lightning Web Components Extension for VS Code.

Where: This change applies to Lightning Experience and all versions of the Salesforce app in Enterprise, Performance, Unlimited, and Developer editions.



Local Development is in beta and has been released early so we can collect your feedback. It may contain significant problems, undergo major changes, or be discontinued. If you encounter any problems, or want to request an enhancement, open a GitHub issue. The use of this feature is governed by the Program Agreement.

How: To install the local development server, make sure that you have the Salesforce CLI installed, a Developer Hub-enabled org, and the most recent stable version of Chrome, Firefox, Safari, or Edge web browser.

Install the Local Development Server

  1. Open a new terminal window and run the following command to install the local development server.
    sfdx plugins:install @salesforce/lwc-dev-server
  2. Check for updates to the local development server.
    sfdx plugins:update
  3. Navigate to your SFDX project, or clone one that has Lightning web components. In this example, we use lwc-recipes.
    git clone
  4. If you're not in the lwc-recipes root directory already, cd into it.
    cd lwc-recipes
  5. Add the .localdevserver folder in your SFDX project to your .gitignore file. This folder contains the local development configuration. Don't modify files inside this folder.
  6. Authorize a Developer Hub (Dev Hub) by following the steps in Enable Dev Hub In Your Org in the Salesforce DX Developer Guide. A Dev Hub is the main Salesforce org that you and your team use to create and manage your scratch orgs, which are temporary environments for developing on the Salesforce platform. You need a Dev Hub to create a scratch org in a later step.
  7. Following the instructions in the Salesforce DX Developer Guide, log in using your Dev Hub credentials. Running the following command opens a login window in your browser.
    sfdx force:auth:web:login -d -a myhuborg
  8. In local development, requests to Lightning Data Service and Apex go to scratch orgs, similar to how they go to your production org. To create a scratch org, run this command from the command line.
    sfdx force:org:create -s -f config/project-scratch-def.json -a "LWC"

    "LWC" is an alias for the scratch org that you can use in other Salesforce CLI commands.



    Don’t connect to a production Salesforce org with the local development server. Local development uses data in real time. If you authenticate to a production org, then you will modify or overwrite data in production.

    To create a scratch org, specify a scratch org definition file. This example uses the scratch org definition file, project-scratch-def.json that is included in lwc-recipes. For other projects, create your own. For more information, see the instructions for Create Scratch Orgs in the Salesforce DX Developer Guide.

  9. Push your code to your scratch org.
    sfdx force:source:push
  10. Start the server.
    sfdx force:lightning:lwc:start
  11. View the server at http://localhost:3333/.

    For more information on local development commands, view the local development documentation by running sfdx force:lightning:lwc:commandName --help.

Access the Local Development Server from VS Code

You can access the local development server's SFDX commands from VS Code's command palette by pressing command + shift + p. By typing in "local development," all three commands are visible.

SFDX commands in VS Code.

To preview Lightning web components, right-click any line of code in the component's HTML, CSS, or JavaScript files. You can also right-click any of the HTML, CSS, or JavaScript filenames or the component folder.

Preview c-hello from the HTML code.Preview component from HTML code.

Preview c-hello from the HTML file.Preview component from the HTML file.

Here's a preview of the component on the local development server.

Previewed component on local development server.