Local Development Server for Lightning Web Components

If you also use Playground to quickly test Lightning web components, then you are also aware that Salesforce will shut down playground in December 2020. But don’t worry we have Local Development Server for Lightning Web Components. The Local Development Server is a Salesforce CLI plug-in that configures and runs a Lightning Web Components-enabled server on our computer. We can develop Lightning web components and see live changes without publishing the components to an org. Local development supports Lightning web components only. It doesn’t support Aura components.

So today we will follow three simple steps to use Local Development Server for Lightning web components.

1. Install the Local Development Server

Firstly, run the command in VS code Terminal

sfdx plugins:install @salesforce/lwc-dev-server

Once it complete the installation we will get the final message.

2. Check for Plugin update

Secondly, we need to make sure that all our plugin are updated. So we will check for update.

sfdx plugins:update

3. Start the Local Development Server

Above two steps we need to follow only once. Finally we are ready to start our Local Development Server. To start the sever use the below command:

sfdx force:lightning:lwc:start

After running this command we can access the Local server at http://localhost:3333/. Finally, we are viewing our development server and it contains list of all our Lightning web components.

So for the demo purpose I have created a basic addition component. I have used below code:

demoLocalDevelopment.html

<template>
    <lightning-card>
        <h1 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Addition Using Apex
        </h1>
        <div slot="footer">
                
        </div>
        <div>
        <!-- fields={fields} -->
        <lightning-input type="number" name="input1" label="Enter First Number"></lightning-input>
        <lightning-input type="number" name="input2" label="Enter Second Number"></lightning-input>
        
        Sum is: <lightning-formatted-number value={total}></lightning-formatted-number>
        <br/>
        <lightning-button variant="brand" label="Sum" title="Sum" onclick={calculateSum} class="slds-m-left_x-small"></lightning-button>
    </div>
    </lightning-card>
</template>

demoLocalDevelopment.js

import { LightningElement } from 'lwc';

export default class DemoLocalDevelopment extends LightningElement {
    total;

    calculateSum(event) {
        let inputNum = this.template.querySelectorAll('lightning-input');
        this.total =  parseInt(inputNum[0].value) + parseInt(inputNum[1].value);
    }
}

We can quickly test our component. When we save our component it will be available on Local server. We can also remove the default org while creating project. So it won’t save the component in Salesforce org.

Local Development Server support below module.

• @salesforce/apex
• @salesforce/label
• @salesforce/resourceUrl
• @salesforce/schema

Configuration for Projects (Optional)

So we can provide our server configuration. We need to add a localdevserver.config.json file in the root directory of our SFDX project.

{
  // Namespace to use referencing your Lightning Web Components
  namespace: 'c',

  // Name of the component to load in the default container
  main: 'app',

  // Location of component files. If you have a namespace, specify the directory the namespace folder is in.
  modulesSourceDirectory: 'src/',

  // Static resources location
  staticResourcesDirectory: 'staticresources',

  // The address port for your local development server. The default port is 3333.
  port: 3333,

  // Path to the custom labels file
  customLabelsFile: 'labels/CustomLabels.labels-meta.xml'
}

So we can quickly setup our Local Development Server for Lightning Web Component. Either we need to do any POC or check anything we can do easily.

Check how we can use Platform Events in Lightning web components here.

Did you like the post or do you have any questions. Let me know in comments. Happy Programming 🙂