Live Development for Lightning

One of the things that always frustrated me about developing with Aura and Lightning Web Components was how long it took to preview even the smallest change. You want to update a background color? increase the font size by 1px? Then you need to push code to the scratch org and refresh the page and wait to see the changes, rinse and repeat. Definitely a tedious process, particularly when you are trying to figure why a component is throwing an error. This all changed in Winter 20 and now there is one more reason you should be adopting SFDX development tools into your workflow.

One of best, and I feel least appreciated features in Winter 20, was the beta release of local development for Lightning and Lightning Web Components. You can read more here. For the first time working on the Salesforce front end feels l any other kind of web development. Make a change and just preview it in the browser. You only need two commands from the SFDX CLI to make it happen. Install the plugin with sfdx plugins:install @salesforce/lwc-dev-server. And launch the local server with sfdx force:lightning:lwc:start. If it works you will see a message like this in your terminal. -This assumes you have the SFDX CLI tool installed to begin with. If not then go here.

Click the link to the local host , that appears in the terminal, and you will have a browser window that will look something like the image below. This is component that I have in development to manage time estimations for project management. Anyone with the PMP will be very familiar with the PERT estimate. If I make a change to the code in my my IDE no more pushing to a scratch org my local host page refreshes automatically and I can see my changes.

I hope everyone finds this feature as useful as I do.