How to set up Lightning Web Components (LWC) in Salesforce?

Written by Prasanth Kumar Published on November 27, 2024 Updated on June 9, 2026

To set up Lightning Web Components (LWC) in Salesforce, follow this comprehensive guide, which includes detailed instructions and related context to help you understand the process. Lightning Web Components (LWC) are a modern, lightweight framework built on web standards to create responsive and dynamic web applications for Salesforce.

How to Set Up Lightning Web Components (LWC) in Salesforce

Step	Task	Description	Commands/Actions
1	Install Salesforce CLI	Download and install Salesforce CLI from the official site. Verify the installation.	`sfdx --version`
2	Install Visual Studio Code (VS Code)	Download and install VS Code from here. Use it as your primary development tool for Salesforce projects.	Launch VS Code
3	Install Salesforce Extensions for VS Code	Install the Salesforce Extension Pack in VS Code to integrate Salesforce-specific tools.	Use Extensions view: `Ctrl+Shift+X` (Windows) or `Cmd+Shift+X` (Mac)
4	Authorize Your Salesforce Org	Connect your Salesforce org to the local environment to deploy and test components.	`SFDX: Authorize an Org`
5	Create a Salesforce DX Project	Create a new project to organize your Lightning Web Components and metadata.	`SFDX: Create Project`
6	Create a Lightning Web Component	Generate the necessary files (HTML, JS, metadata) for your LWC.	`SFDX: Create Lightning Web Component`
7	Edit Component Files	Add HTML, JavaScript, and metadata code to customize your component.	Edit files in `force-app/main/default/lwc/<component_name>`
8	Deploy the Component to Salesforce	Upload your component to Salesforce to make it available in the org.	Right-click `force-app` folder → Select `SFDX: Deploy Source to Org`
9	Add the Component to a Lightning Page	Use the Lightning App Builder to drag and drop your component onto a Lightning Page.	Open Default Org: `SFDX: Open Default Org` → Gear icon → Edit Page
10	Verify the Component	Refresh the Lightning page to confirm your component appears and functions as expected.	Navigate to the page in the Salesforce UI

This table summarizes the key steps to set up Lightning Web Components in Salesforce. Each step includes the necessary commands or actions for smooth execution.

1. Install Salesforce CLI

Salesforce CLI is a command-line interface that simplifies the development process. It provides commands to create projects, authorize Salesforce orgs, and deploy components.

Download the CLI from the official Salesforce site and install it on your system.
After installation, verify it by running the following command in your terminal or command prompt: sfdx --version This ensures that the CLI is installed and ready to use.

2. Install Visual Studio Code (VS Code)

Visual Studio Code (VS Code) is a popular text editor for coding. It integrates seamlessly with Salesforce through its extension pack, making it the preferred choice for Salesforce developers.

Download and install VS Code from here.
Launch VS Code, and you’ll use it as your primary development environment for building and editing LWC.

3. Install Salesforce Extensions for VS Code

The Salesforce Extension Pack enhances VS Code by adding tools specific to Salesforce development, such as syntax highlighting, project commands, and deployment options.

Open VS Code and navigate to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).
Search for Salesforce Extension Pack, then click Install.
Once installed, the extensions will enable you to interact with your Salesforce org and streamline your LWC development.

4. Authorize Your Salesforce Org

Authorizing your Salesforce org links your local development environment with a Salesforce instance, allowing you to deploy and test components directly.

Open the Command Palette in VS Code (Ctrl+Shift+P or Cmd+Shift+P), and run: SFDX: Authorize an Org
Choose Project Default as the login URL.
A browser window will open, prompting you to log in with your Salesforce credentials. After successful login, your org will be authorized for development.

5. Create a Salesforce DX Project

A Salesforce DX project organizes your metadata and code, making it easier to manage and deploy.

Use the Command Palette to run: SFDX: Create Project
Select the Standard project type, provide a name (e.g., LWC_Tutorial), and specify a location to store the project.
This creates a folder structure with a force-app directory, where your components and metadata will reside.

6. Create Your First Lightning Web Component

To start building, create a new Lightning Web Component within your Salesforce DX project.

Open the Command Palette and run: SFDX: Create Lightning Web Component
Enter a name for the component (e.g., helloWorld).
Save the component in the default directory: force-app/main/default/lwc.
The system generates three files (.html, .js, and .js-meta.xml) for the component.

7. Edit Component Files

Customize your component by editing the files created:

`HelloWorld.html`:

This file defines the component’s HTML structure and UI. Add the following content:

<template>
  <h1>Hello, Lightning Web Components!</h1>
</template>

`HelloWorld.js`:

This JavaScript file handles the component’s behavior and logic. Add:

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {}

`HelloWorld.js-meta.xml`:

This file specifies metadata for your component. Ensure it contains:

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

These configurations expose your component to various Lightning pages.

8. Deploy the Component to Salesforce

Deployment uploads your component to your Salesforce org for testing and usage.

Right-click the force-app folder in VS Code and select: SFDX: Deploy Source to Org
The Output panel in VS Code will confirm whether the deployment was successful.

9. Add the Component to a Lightning Page

Integrating your component into a Salesforce page allows you to see it in action:

Run: SFDX: Open Default Org
Go to the App Launcher, select an app (e.g., “Sales”), and click the gear icon to open Edit Page.
In the Lightning App Builder, locate your component (helloWorld) under “Custom.”
Drag and drop it onto the page canvas, then click Save and Activate to make it live.

10. Verify the Component

After completing the setup, navigate to the page where you added the component. Refresh the page, and you should see: “Hello, Lightning Web Components!”
This confirms that your setup and component creation were successful.

With these steps, you’ve created and deployed your first Lightning Web Component in Salesforce. LWC simplifies the development of scalable and reusable components, enhancing the user experience in Salesforce applications.