Preview Components with Local Dev (Beta)
Local Dev is a pilot or beta service that is subject to the Beta Services Terms at Agreements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of this pilot or beta service is at the Customer's sole discretion.
| USER PERMISSIONS NEEDED | |
|---|---|
| To enable Local Dev for an org: | View Setup and Customize Application |
With Local Dev (Beta), you can develop your Lightning web components (LWCs) in a real-time preview of your Lightning app or Experience Cloud Lightning Web Runtime (LWR) site. The preview automatically updates when you save changes to your source code, so you can iterate faster on your LWCs without deploying code or manually refreshing the preview in your browser.
Migrate to the new Local Dev experience before we eventually deprecate the LWC Local Development Server, which has limited testing and previewing capabilities.
Local Dev is available for users in sandbox as an open beta, and it's turned off by default. You can also enable Local Dev for scratch orgs.
With Local Dev, you can run a preview of the following types of Salesforce projects.
- Lightning Experience
- Salesforce mobile app
- LWR Sites for Experience Cloud
For now, this feature is only available through the Salesforce command-line interface (CLI). To run a real-time preview for your app or site:
In your terminal, run this CLI command for your project.
Before you can use Local Dev for an app or site, you have to enable it for your Salesforce sandbox org or scratch org.
To turn on this beta feature for your sandbox org, from Setup, in the Quick Find box, enter Local Dev and then select Local Dev. Select Enable Local Dev (Beta) to turn on the feature for all org users.
To enable Local Dev for your scratch org, complete these steps.
- In your SFDX project, open the file
config/project-scratch-def.json. - In the
settingssection of the file, add the key"enableLightningPreviewPref"and set it totrue, like this:
There are different commands for previewing a Lightning app and an Experience Cloud LWR site. You can run your preview in a desktop or Salesforce mobile app (iOS or Android) environment.
In the CLI, run sf lightning dev app with the following flags as needed.
| Flag | Required/Optional | Description |
|---|---|---|
-o, --target-org | Required | The username or alias of the target org for the preview. Not required if you already set the target-org configuration variable. Example: --target-org myOrg |
-n, --name | Optional | The name of the Lightning Experience app you want to preview. If your site name has whitespaces, wrap the name in quotes. Example: To run Local Dev for an app named SDO - Consumer, run --name "SDO - Consumer" |
-t, --device-type | Optional | The type of device to display the app preview. It accepts only one of these options:
--device-type desktop |
-i, --device-id | Optional | If you set --device-type to ios or android, you can choose the ID of the mobile device to display the preview. The default value is the ID of the first available mobile device. Example: --device-id "iPhone 15 Pro Max" |
--flags-dir | Optional | Import flag values from a directory. |
Before you can run Local Dev for an Experience Cloud LWR site, you have to finish these setup steps:
- After Local Dev is enabled for your org, publish your Experience Cloud LWR site.
- Set your site's base path to
/. To learn how to configure site paths, see Salesforce Help: Add a Custom URL.
This is a beta-only limitation. We're working on removing this step for the GA release of Local Dev.
Then, in the CLI, run sf lightning dev site with the following flags as needed.
| Flag | Required/Optional | Description |
|---|---|---|
-o, --target-org | Required | The username or alias of the target org for the preview. Not required if you already set the target-org configuration variable. Example: --target-org myOrg |
-n, --name | Optional | The name of the Experience Cloud LWR site you want to preview. If your site name has whitespaces, wrap the name in quotes. Example: To run To run Local Dev for a site named SDO - Consumer, run --name "SDO - Consumer" |
--flags-dir | Optional | Import flag values from a directory. |
Be aware of these considerations and limitations for working with Local Dev.
When you edit local files with Local Dev enabled, your LWCs reflect the following changes in your app or site preview:
- Basic HTML and CSS edits
- Importing new CSS-only LWCs
- JS edits in-service component library
- JS changes in component methods that don't affect the LWC's public API (like updating Lightning App Builder configurations for LWCs)
To apply any other local changes to your app or site preview, you have to deploy the changes to your org using the project deploy start command. (If you're previewing an Experience Cloud LWR site, you also have to republish your site in Experience Builder.) Finally, restart the Local Dev server to see the updated app or site preview in your browser.
If you add a new file to an existing component, you have to restart the Local Dev server to see that change in your app or site preview.
Local Dev automatically updates your preview with most local changes to files ending in .js, .html, and .css. If you edit a component file of any other type — like .js-meta.xml — you have to deploy the component to see those changes in your local preview.
Local Dev only lets you preview LWCs. You can't use it to test Aura components in your app or site preview.