Setup LWC Local Development Environment

PublishedApril 10, 2025

While Salesforce provides an online development environment, setting up a local development environment can enhance productivity, enable faster testing, and allow integration with version control systems. This allows developers to build, debug, and validate LWC applications before pushing them to Salesforce org.

Install Salesforce CLI

Salesforce provides Command-Line Interface (CLI) for developers to interact with Salesforce environments in many ways, like retrieving or pushing code or interacting with data.

Install from https://developer.salesforce.com/tools/salesforcecli.
Verify the installation using following command:
sf version

Install Salesforce Extension Pack (Expanded)

This Extension Pack enhances development on Lightning Platform by providing tools for working with Development orgs, Lightning Web Components, Apex and more. It also includes popular community-built extensions for formatting and analyzing code.

Launch Visual Studio Code and Click Extensions in the Sidebar.
Search for Salesforce Extension Pack (Expanded) and Click Install.

Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux to reveal the command palette. In the command palette, type sfdx to display an initial list of available commands.

Activate Developer Hub

Developer Hub (Dev Hub) is Salesforce org used to create and manage scratch orgs.

From Setup, enter Dev Hub in the Quick Find box and select Dev Hub.
Click the slider to enable Dev Hub.

Install Local Dev Plugin

Local Dev is Salesforce CLI tool that lets you run real time preview of your Lightning web components in your browser. The preview updates automatically as you edit your components locally, so you don't have to deploy code or manually refresh your browser page. Run below command in terminal to install Local Dev plugin.

sf plugins install @salesforce/plugin-lightning-dev@prerelease

If you have production org with an upcoming release, you should install the latest version of Local Dev using @latest.

To enable Local Dev in your project, follow these steps.

Open the config/project-scratch-def.json file.
In the lightningExperienceSettings section of the file, add the "enableLightningPreviewPref" key and set it to true.

config / project-scratch-def.json

{
  "orgName": "MS-29",
  "edition": "Developer",
  "features": ["EnableSetPasswordInApi"],
  "settings": {
    "lightningExperienceSettings": {
      "enableS1DesktopEnabled": true,
      "enableLightningPreviewPref": true
    },
    "mobileSettings": {
      "enableS1EncryptedStoragePref2": false
    }
  }
}

Authorize Dev Hub

In the command palette, type sdfx: authorize and select SDFX: Authorize a DEV Hub. Enter alias name e.g., devHubOrg and login using Dev Hub Org credentials.

Create Scratch Org

Scratch orgs are disposable Salesforce orgs that are used to support development and testing. Run the below command to create scratch org.

sf org create scratch \
  --definition-file config/project-scratch-def.json \
  --alias scratchOrg \ 
  --target-dev-hub devHubOrg

This CLI command will create a scratch org using config/project-scratch-def.json file and the alias scratchOrg.

Deploy changes to Scratch Org

Now that the setup is complete, we can deploy Lightning Web Components (LWC) to the scratch org.

sf project deploy start --target-org scratchOrg

Once the changes are successfully deployed to the scratch org, the component can be added to the page.

To open the scratch org, enter this command in the Terminal tab:

sf org open --target-org scratchOrg

For testing purposes, let's add the component to the Account Record page.

From the App Launcher, find and select Sales.
Click the Accounts tab, then click New to create an account.
Enter Component Developers as Account Name, then click Save.
Click Setup, then select Edit Page to open Lightning App Builder.
Drag the Component (under Custom) onto the page.
Click Save, then click Activate.
Click Assign as Org Default and then select Desktop and phone.
Click Next, then Save.

Preview Component using Local Dev

With Local Dev, you can run real time preview of your Lightning app. The preview is automatically updated when your local component change, so you don't have to deploy code or refresh your browser page.

Run the following command to open the Scratch Org in Local Dev mode.

sf lightning dev app \ 
  --target-org scratchOrg \ 
  --device-type desktop

Scratch org comes with a few default apps that you can use. When you're prompted to select a Lightning Experience app to preview, use the arrow keys to select Sales. If the command runs successfully, it opens a new tab in your browser with a preview of your org's Seller Home page.

Now let's edit the component and see how your Local Dev preview updates itself in real-time. From the component html file, change "Contact Information" to "Contact Info". Take a look in the browser at app preview, and notice how the title of component automatically updates itself based on your local change. You didn't have to redeploy your app or manually refresh the page to see your changes.

By setting up local development environment for LWC, we can efficiently test and preview components in real time without the need for continuous deployments. You can now quickly iterate on your components locally, with changes reflected immediately in the browser, significantly speeding up the development and testing process.