Real-Time Preview for Lightning Web Components

Are you a Salesforce developer working with Lightning Web Components (LWC)? If so, the new Local Dev (Beta) feature can help you speed up development. With Local Dev, you can preview your Lightning apps or Experience Cloud Lightning Web Runtime (LWR) sites in real time, without needing to deploy code or refresh manually. This blog will guide you through setting up and using Local Dev, so you can iterate faster on your LWC development.

Why Local Dev?

Salesforce’s Local Dev is the next evolution of the LWC Local Development Server, providing a more powerful way to test and preview your LWCs. Unlike the old server, Local Dev offers an updated experience with enhanced capabilities. The preview automatically refreshes whenever changes are detected in your source code, giving you immediate feedback on your LWC app’s behavior.

Who Can Use Local Dev?

Local Dev is available in Winter '25 sandbox org and is turned off by default. Scratch org users can also enable it. Although it’s still in open beta, migrating to Local Dev is recommended before the older LWC Local Development Server is eventually deprecated.

Step-by-Step Guide: Setting Up Local Dev

Step 1: Prerequisites

Salesforce CLI: Local Dev runs only from the Salesforce Command-Line Interface (CLI).

Enable Local Dev for your Org:

For Sandbox Orgs:
- Go to Setup, and in the Quick Find box, enter "Local Dev."
- Select Enable Local Dev (Beta) to enable it for all org users.
For Scratch Orgs:
- In your SFDX project, open the config/project-scratch-def.json file and add "enableLightningPreviewPref": true in the settings section.

Here I am using Scratch org so my next steps will be based on Scratch org only.

Create a Scratch org after creating a scratch org then add "enableLightningPreviewPref": true in the config/project-scratch-def.json file.
Then deploy it to your scratch org. If you cannot deploy in the org getting an error then add "release": "preview" in the config/project-scratch-def.json file.

{
  "orgName": "amlendubajpai company",
  "edition": "Developer",
  "release": "preview",
  "features": ["EnableSetPasswordInApi"],
  "settings": {
    "lightningExperienceSettings": {
      "enableS1DesktopEnabled": true,
      "enableLightningPreviewPref": true
    },
    "mobileSettings": {
      "enableS1EncryptedStoragePref2": false
    }
  }
}

Step 2: Create your scratch org and Installing the Local Dev Plugin:

Once you’ve set up the CLI, run this command in your terminal to install the Local Dev plugin:

sf plugins install @salesforce/plugin-lightning-dev

Step 3: Create your LWC component to Review:

<template>
    <lightning-card variant="Narrow" title={label.title} icon-name="standard:task">
      <p slot="footer">{label.footer}</p>
      <h1 class="slds-text-heading_large">{label.message}</h1>
    </lightning-card>
</template>

/************************************************************************
(c) Copyright 2024 Avenoir Technologies Pvt. Ltd. All rights reserved.*
Created by: Sourav Dash
Ticket Number: AVEBLOG-128
------------------------------------------------------------------------*
Blog: Real-Time Preview for Lightning Web Components
------------------------------------------------------------------------*
* Version History:
* VERSION    DEVELOPER NAME        DATE         DETAIL FEATURES
*   1.0       Sourav Dash         17/10/2024    Initial Development
***********************************************************************/
import {LightningElement} from 'lwc';
import title from '@salesforce/label/c.LOCAL_DEV';
import message from '@salesforce/label/c.Quick_View_in_Local_Dev';
import footer from '@salesforce/label/c.Card_Footer123565475675';


export default class QuickViewLocalDev extends LightningElement {
    label = {
        title,
        message,
        footer
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

After creating this component deploy it to your org, after deploying it in the Lightning App Builder create an app page, I have named it QuickViewLocalPage and added it to the Sales app.

Step 3: Running a Real-Time Preview:

sf lightning dev app -> run this command in the terminal then select Desktop, sales then it will enter your Local dev, and from here select sales and QuickViewLocalPage.
To check how it works you call a line of code eg-

<h1 class="slds-text-heading_large">{label.message}</h1>

After adding this line of code you will see data getting updated without deploying the code.
It makes our work faster and makes testing easier.
As of now, it’s still in beta, Local Dev is subject to Salesforce’s Beta Services Terms, meaning the functionality may change over time and is available at the customer's discretion.

Conclusion

Local Dev (Beta) is a powerful tool for Salesforce developers looking to iterate faster and more efficiently on LWC development. You can develop Lightning apps and Experience Cloud sites without deploying code with real-time previewing and easier testing. Migrate to the new Local Dev experience today and stay ahead of the curve as the old LWC Local Development Server is phased out.

If you'd like to see the code and resources used in this project, you can access the repository on GitHub. To access the AVENOIRBLOGS repository, click here. Feel free to explore the code and use it as a project reference.

Happy Coding! You can leave a comment to help me understand how the blog helped you. If you need further assistance, please contact us. You can click "Reach Us" on the website and share the issue with me.

Reference

Blog Credit:

S. Dash

Salesforce Developer

Avenoir Technologies Pvt. Ltd.

Reach us: team@avenoir.ai

Let's Build Your Project