Accelerate LWC Development With Salesforce’s Local Development Server

Tired of constantly deploying and refreshing your UI every time you update your Lightning web components (LWCs)?

With Local Dev (beta), you can streamline your workflow by developing your LWCs while previewing them in real-time directly within your Lightning app or Experience Cloud site.

Note: Before you begin make sure that you have the latest version of the CLI command, run “sf update”.

Step 1: Install the Local Dev Plugin
To begin, install the Local Dev Plugin using one of the following commands based on your environment:

For Production or Scratch orgs:

sf plugins install @salesforce/plugin-lightning-dev

OR

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

For Sandbox environments:

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

Step 2: Enable Local Dev

• Navigate to Setup in Salesforce.

• In the Quick Find box, type Local Dev.

• Select Local Dev and enable the feature.

Step 3: Enable Local Dev for Your Scratch Org

To configure Local Dev for a scratch org:

• Open your SFDX project.

• Locate the config/project-scratch-def.json file.

• In the settings section of the file, add the following key
  “enableLightningPreviewPref”: true

Step 4: Preview

Use Local Dev to run a preview of the following types of Salesforce projects.

• Lightning Experience apps (desktop and Salesforce mobile app)

• LWR Sites for Experience Cloud

To preview your application, use the following steps:

Run the command below in the CLI to start the guided setup:
sf lightning dev app

• Alternatively, if you want to bypass the guided steps, you can directly use the following command in the VS Code terminal:
  
  sf lightning dev app — target-org — name — device-type — device-id — flags-dir

Replace the placeholders with the appropriate values for your project. This will launch the application preview.

Guided Steps When Running the Command sf lightning dev app:

1.The command will first prompt you to select the device type.

2.Next, it will ask you to choose a Lightning Experience App available in your org.

3.Once completed, your Scratch org will open with the message “Local Dev (Beta) is on” displayed prominently at the top.

1. Start by creating a Lightning Web Component (LWC).

2. Embed the LWC into any Lightning app. For now, you can add it to any page in the Sales App.

3. Make changes to your LWC, such as modifying the HTML, CSS, or JavaScript. As soon as you save your code, you’ll experience the power of Local Dev (Beta), with changes reflected in real-time on the UI.

Notice how quickly the LWC updates, without needing to deploy your code or refresh the page. The changes are applied instantly!

LWCs automatically update for the following changes only.

1. Basic HTML revisions: Changing component attributes, like in our case

lighting-button variant=”neutral” to variant=”brand”

Get More info: https://www.kandisatech.com/blog-details/accelerate-lwc-development-with-salesforces-local-development-server