Set Up LWC Local Development

To set up LWC Local Development, install the server, enable and authorize a Dev Hub org, and create a scratch org. To use the LWC Local Development, you must develop Lightning web components in a Salesforce DX project.

Install the LWC Local Development Server

if you will show some error then need to run the below command after re-entering the above command.

Installing plugin @salesforce/lwc-dev-server… failed

Then needed to run the command

sudo npm install -g node-gyp in your macOS System.

Run Local Development Salesforce CLI Commands in VS Code

View the commands from VS Code’s command palette by pressing command + shift + p. By typing in “local development,” all three commands are visible.

SFDX: Open Local Development Home
If the Local Development server isn’t currently running, this command starts the server and opens localhost:3333 in your web browser

SFDX: Start LWC Local Development Server
This command starts the Local Development server

SFDX: Stop LWC Local Development Server
This command stops the Local Development server.

Preview Lightning Web Components in VS Code
To preview Lightning web components, right-click any line of code in the component’s HTML, CSS, or JavaScript files. You can also right-click any of the HTML, CSS, or JavaScript filenames or the component folder.