Increase Productivity with Local Development for Lightning Web Components (Beta)
Where: This change applies to Lightning Experience and all versions of the Salesforce app in Enterprise, Performance, Unlimited, and Developer editions.
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
- Open a new terminal window and run the following command to install the local development server.
sfdx plugins:install @salesforce/lwc-dev-server
- Check for updates to the local development server.
- Navigate to your SFDX project, or clone one that has Lightning web components. In this
example, we use lwc-recipes.
git clone email@example.com:trailheadapps/lwc-recipes.git
- If you're not in the lwc-recipes root directory
already, cd into it.
- 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.
- 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.
- 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
- 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.
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.
- Push your code to your scratch org.
- Start the server.
- 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.
Preview c-hello from the HTML code.
Preview c-hello from the HTML file.
Here's a preview of the component on the local development server.