Local Development Server – Salesforce

With some experience working with the salesforce development team I noticed that local development works differently for salesforce development. Teams use their favorite code editors like eclipse, vscode etc and every time developer changes the the code and wants to test it, the code needs to be pushed onto a salesforce org. Vscode is the recommended IDE and provides a great integrated development and provides easy mechanism to sync the code with the org. 

From my personal experience working on the salesforce development environment this may easily get turned into a frustrating development experience and slow things down a bit. Since there is no instant feedback on your code change, the coding experience feels prehistoric. On the other side having worked on lots of Angular applications previously the developer feedback was instant (thanks to the live-reload feature).

In year 2019, Salesforce introduced a brand new feature to solve this problem. They called it ‘Local Development Server’.

What is a Local development server?

“The Local Development Server is a Salesforce CLI plug-in that configures and runs a Lightning Web Components-enabled server on your computer. You can develop Lightning web components and see live changes without publishing the components to an org. “

Salesforce documentation

Wow, that sounds promising!

So now if you’re developing components you could easily test them locally without submitting it to the org and you see instant feedback of errors etc. Fix errors and instantly you see the local development server refreshing with your changes. 

Development server aims to help in three main areas to improve productivity:

  1. Provide component rendering experience as close to a real environment as possible. If your component works locally, it will work in the org.
  2. Make it easier and faster to debug, find and resolve errors. The local server shows you the error in the browser with exact error message, file and line # where the error occurs.
  3. Integration with the real org data. Any request for the data from your salesforce org will get proxied to the org and returned to your local component. You can do CRUD operations, call apex controllers.

How do you set it up?

  1. Install vscode
  2. Install Salesforce CLI
  3. Install Salesforce Extension Pack
  4. Local Development will ship with the Salesforce CLI out of the box but for now you need to install it by running following command
    1. sfdx plugins:install @salesforce/lwc-dev-server
    2. Next you create your project in vscode and authorize an org.
  5. Now that the plugin is installed and the project is created you can launch the lightning web development server using this command
    1. sfdx force:lightning:lwc:start Or
    2. Use the vscode command palette and choose ‘SFDX: Open Local Development Server’. If the local development server isn’t running, this would start the server.
  6. Open localhost:3333 in  your web browser and this is what you would see.
Landing page on my local development server showing all lwc components from my project
Clicking on c-hello-world component produces this page which shows the output from the component.

At this point, any change you make to the component will refresh this browser window and reflect your changes.

Makes life little easier!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s