Lightning Web Components (LWC) is Salesforce’s modern framework for building fast, reusable, and powerful UI components. Before you start coding, you must set up the required tools on your system.
This guide covers every step—from software installation to Salesforce DX setup—so beginners can start LWC development smoothly.
What are Lightning Web Components (LWC)?
LWC is a lightweight framework built using modern JavaScript and native browser APIs. Unlike Aura Components, LWC relies heavily on standard web technologies such as:
- JavaScript (ES6+)
- HTML
- CSS
- Web Components Standards
- Shadow DOM & Custom Elements
This approach makes LWC fast, scalable, and future-proof — helping Salesforce developers build UI with the power of modern JS frameworks.
Watch Our Video Tutorial
Step 1: Install Google Chrome
You will use Chrome for testing and debugging your LWC components.
Download:
Go to Google Chrome → Download → Install.
Step 2: Install Visual Studio Code (VS Code)
VS Code is the recommended code editor for Salesforce development.
How to Install:
- Visit the VS Code official website.
- Download the version for your OS (Windows/Mac/Linux).
- Install normally and open VS Code.
Important Extensions for LWC:
- Salesforce Extension Pack
- Lightning Web Components
- Prettier – Code Formatter
- ESLint
Step 3: Install Node.js (Required for Salesforce CLI)
Node.js helps Salesforce CLI run properly.
Check if Node is already installed:
node -v
Download:
Go to nodejs.org → Download LTS version → Install.
Step 4: Install Salesforce CLI (SFDX CLI)
Salesforce CLI is required to create projects, authorize orgs, deploy LWCs, and run commands.
Download:
Visit developer.salesforce.com → Download Salesforce CLI → Install.
Check successful installation:
sfdx --version
Step 5: Install Git (Optional but recommended)
Git helps with version control and teamwork.
To check if Git is installed:
git --version
If not installed:
Visit git-scm.com → Download → Install.
Step 6: Create a Salesforce Developer Org
You need a Salesforce Developer Org to test and deploy your LWC components.
Steps:
- Go to developer.salesforce.com/signup
- Enter your details
- Verify your email
- Login → Setup → Enable Dev Hub
Step 7: Connect VS Code to Salesforce Org
Now you will connect VS Code with your Salesforce org using Salesforce CLI.
Step 1 — Create an SFDX Project:
sfdx force:project:create -n lwcPractice
Step 2 — Open the Project in VS Code
File → Open Folder → select the created project.
Step 3 — Authorize an Org:
sfdx force:auth:web:login -a DevOrg A browser will open → Login to your Salesforce Developer Org → Success.
Step 8: Create Your First LWC Component
Use the following command:
sfdx force:lightning:component:create \ -n helloWorld \ -d force-app/main/default/lwc
Component Structure:
| File | Description |
|---|---|
| helloWorld.html | UI structure |
| helloWorld.js | Logic/behavior |
| helloWorld.js-meta.xml | Component visibility & configuration |
Step 9: Deploy LWC to Salesforce Org
Deploy the entire project:
sfdx force:source:deploy -p force-app
Deploy specific LWC:
sfdx force:source:deploy -p force-app/main/default/lwc/helloWorld
Step 10: Add LWC to Lightning App Builder
Steps:
- Go to Salesforce org
- Setup → Lightning App Builder
- Create a new page or open existing one
- Search for your component (helloWorld)
- Drag and drop on the page
- Save & Activate
Troubleshooting Common Errors
1. Salesforce CLI not recognized
Add SFDX CLI to system PATH or reinstall CLI
2. Org not connecting
- Check internet connection
- Try `sfdx force:auth:web:login -r https://login.salesforce.com`
3. Project not deploying
- Check component metadata file
- Check API version
- Make sure Dev Hub is enabled
Frequently Asked Questions (FAQ)
Conclusion
More SFDC Resources
Start your SFMC journey today — join our Live Training
Need help? Chat with us on WhatsApp anytime.
Learn. Practice. Get Certified. Succeed with Peoplewoo Skills.
