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 🙂
Running the command sfdx force:lightning:lwc:start gives me this error – Please help
sushmah@3c22fbbb06f1 ToDoManager % sfdx force:lightning:lwc:start
Use of this plugin is subject to the Salesforce.com Program Agreement.
By installing this plugin, you agree to the Salesforce.com Program Agreement
and acknowledge the Salesforce Privacy Policy.
Starting LWC Local Development.
Username: sushmah@amazon.com.mc
Api Version: 49.0
[HPM] Proxy created: / -> https://amazoncommc-dev-ed.my.salesforce.com
[HPM] Subscribed to http-proxy events: [ ‘proxyReq’, ‘error’, ‘close’ ]
cp: no such file or directory: /Users/sushmah/ToDoManager/force-app/main/default/staticresources/*
cp: no such file or directory: /Users/sushmah/ToDoManager/force-app/main/default/contentassets/*
LWR6003: Listening on :3333
Server up on http://localhost:3333
LWR6000: Created version hash “d764205d47”
LWR6001: Writing /Users/sushmah/ToDoManager/.localdevserver/webruntime/custom-component/a7548013f0/dev/en-US/c/myFirstLWC.js…
LWR6001: Writing /Users/sushmah/ToDoManager/.localdevserver/webruntime/custom-component/a7548013f0/dev/en-US/c/myFirstLWC.js…
CLIError: timed out
at Object.error (/Users/sushmah/.local/share/sfdx/client/7.163.0-ea5a9c6/node_modules/@oclif/core/lib/errors/index.js:28:15)
at /Users/sushmah/.local/share/sfdx/client/7.163.0-ea5a9c6/node_modules/@oclif/core/lib/cli-ux/index.js:25:66
at async flush (/Users/sushmah/.local/share/sfdx/client/7.163.0-ea5a9c6/node_modules/@oclif/core/lib/cli-ux/index.js:121:9) {
oclif: { exit: 2 },
code: undefined
}
CLIError: timed out
at Object.error (/Users/sushmah/.local/share/sfdx/client/7.163.0-ea5a9c6/node_modules/@oclif/core/lib/errors/index.js:28:15)
at /Users/sushmah/.local/share/sfdx/client/7.163.0-ea5a9c6/node_modules/@oclif/core/lib/cli-ux/index.js:25:66
at async flush (/Users/sushmah/.local/share/sfdx/client/7.163.0-ea5a9c6/node_modules/@oclif/core/lib/cli-ux/index.js:121:9) {
oclif: { exit: 2 },
code: undefined
}
LWR6004: Server is shutdown
Error: timed out
at Object.error (/Users/sushmah/.local/share/sfdx/client/7.163.0-ea5a9c6/node_modules/@oclif/core/lib/errors/index.js:28:15)
at /Users/sushmah/.local/share/sfdx/client/7.163.0-ea5a9c6/node_modules/@oclif/core/lib/cli-ux/index.js:25:66
at async flush (/Users/sushmah/.local/share/sfdx/client/7.163.0-ea5a9c6/node_modules/@oclif/core/lib/cli-ux/index.js:121:9)
sushmah@3c22fbbb06f1 ToDoManager %