Press enter to see results or esc to cancel.

LWC Local Development

In this blog post, we will see step by step guide on how to set up the LWC Local Development Environment. Salesforce in October 2019 announced Local Development for LWC. The main advantage of this local development is you don’t have to deploy your code every time you make some changes to your existing code. This way you can increase productivity by decreasing the time taken for the deployment process.

LWC Local Development needs some plugin installation that salesforce provides at this moment and currently, it is in beta. Going forward salesforce will move this plugin to the Official Salesforce CLI plugin.

Prerequisites:
  1. DevHub enable Org
  2. Latest Browser
  3. Salesforce CLI installed on your machine.

Step by Step guide to install and use

  1. Run sfdx plugins:install @salesforce/lwc-dev-server by opening the command prompt in your machine as an Administrator ( Currently I am talking about Windows machine)
  2. Once the plugin is successfully installed on your machine run this command: sfdx force:lightning:lwc:start
  3. Visit http://localhost:3333 to check the LWC Local Development Environment.

Things to remember when you are running the command
sfdx force:lightning:lwc:start. We need to run this command inside the salesforce project otherwise you will end up with an error message stating as below.

lwc_error

Once everything goes well you can see Server up on http://localhost:3333 message in your command prompt.

You can see the LWC Local Development Server will open at http://localhost:3333/ and it has all the lwc components already present in your Authenticated Org.

LWC-Local-Development-Server

Open any LWC Component and you can see there is an option where you can Quickly view the Component in VS Code.

View-in-VS-Code

Go back to your VSCode and observe that there is a new folder .localdevserver is added to the project folder.

localdevserver

The local development advantage is that you don’t have to deploy the code every time. After the code save in vscode you can see the changes in local development in http://localhost:3333

If there are any errors in the code you can see the errors in the component with a clear description.

lwc-local-development-error

Keep in mind that you can’t develop anything from the browser it is just for a quick check of the LWC component in UI.

NOTE: Don’t close the command prompt, In case if you close the cmd your server will not work. You have to start the server again by running the same command.

Reference: https://developer.salesforce.com/blogs/2019/10/announcing-lwc-local-development-beta.html