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.

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

Note

Note

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 Salesforce.com 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.

  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 are using lwc-recipes.
    git clone git@github.com:trailheadapps/lwc-recipes.git
  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.

    Note

    Note

    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.