Getting Started with LWC · Lesson 2 of 25
LWC Setup: VS Code, Salesforce CLI and Orgs
LWC development happens on your computer, not in the browser: you write components in VS Code, keep them in Git, and deploy them to a Salesforce org with the Salesforce CLI. This lesson sets up that toolchain with the current CLI (sf, version 2) – many older tutorials still show the retired sfdx force:… commands, which no longer work.
In this lesson
- Installing the tools
- Creating a Salesforce DX project
- Connecting a Developer Edition org or sandbox
- Dev Hub and scratch orgs
1. Install the tools
| Tool | Why |
|---|---|
| Node.js LTS | runs the CLI, Prettier, ESLint and Jest tests |
Salesforce CLI (sf) | creates projects, connects orgs, deploys and retrieves metadata |
| VS Code + Salesforce Extension Pack (Expanded) | LWC autocomplete, linting, deploy-on-save, Apex support |
| Git | version control – every Salesforce team uses it |
| A Developer Edition org | a free, permanent org to experiment in (sign up at developer.salesforce.com) |
npm install --global @salesforce/cli
sf --version # @salesforce/cli/2.x …
sf update # keep it current2. Create a project
sf project generate --name lwc-course --template standard
cd lwc-course
code .lwc-course
- sfdx-project.json – package directories and the default API version
- config/project-scratch-def.json – the shape of scratch orgs
- force-app/main/default/
- lwc/ – your Lightning Web Components, one folder each
- classes/ – Apex classes
- objects/, layouts/, messageChannels/ … other metadata
- jest.config.js, package.json – Jest tests for components
- .forceignore – files the CLI should never deploy
Run npm install once in the project to get Prettier, ESLint and the LWC Jest toolkit used later in this course.
3. Connect an org
# a Developer Edition or production org
sf org login web --alias dev --set-default
# a sandbox
sf org login web --alias uat --instance-url https://test.salesforce.com
sf org list # every org you're connected to
sf org open # open the default org in the browserThe CLI stores an OAuth token, so you log in once per org. --set-default makes later commands use that org without naming it.
4. Scratch orgs (optional, recommended for teams)
A scratch org is a disposable org created from your project's configuration – perfect for building a feature from a clean state and for CI. You create them from a Dev Hub (enable it in your Developer org: Setup → Dev Hub).
sf org login web --alias devhub --set-default-dev-hub
sf org create scratch --definition-file config/project-scratch-def.json --alias feature-x --duration-days 7 --set-default
sf project deploy start # push the whole project into it
sf org open
sf org delete scratch --target-org feature-x # when you're doneA typical team workflow
- Branchcreate a Git branch and a scratch org for the feature
- Buildwrite components and Apex; deploy and test in the scratch org
- Reviewopen a pull request; CI runs Jest and Apex tests
- Releasedeploy to UAT sandbox, then production (or via DevOps Center / a pipeline)
Everyday commands
| Command | Does |
|---|---|
sf lightning generate component --name contactCard --type lwc --output-dir force-app/main/default/lwc | creates a component folder with its files |
sf project deploy start --source-dir force-app/main/default/lwc/contactCard | deploys one component |
sf project deploy start | deploys the whole project |
sf project retrieve start --metadata ApexClass:AccountController | pulls metadata from the org into the project |
npm run test:unit | runs the LWC Jest tests |
VS Code shortcuts
The Salesforce extensions put these commands in the command palette (Ctrl/Cmd+Shift+P → "SFDX: Create Lightning Web Component", "SFDX: Deploy This Source to Org"), and right-clicking a folder deploys it. Turn on "Push or Deploy on Save" to deploy every time you save while you're learning.
Practice
Try it yourself
Write the three commands to create a project named
sales-ui, connect it to a sandbox with the aliasqa, and generate a component calledquoteSummary.Show solution
sf project generate --name sales-ui sf org login web --alias qa --instance-url https://test.salesforce.com --set-default sf lightning generate component --name quoteSummary --type lwc --output-dir force-app/main/default/lwc
Quick check
Which command deploys your project to the default org?
sf project deploy start.
What do you need before creating scratch orgs?
A Dev Hub org, connected with --set-default-dev-hub.
Where do components live in a DX project?
force-app/main/default/lwc/, one folder per component.
Summary
- Install Node.js, the sf CLI, VS Code with the Salesforce Extension Pack, and Git.
- sf project generate creates a DX project; sf org login web connects orgs; sf project deploy start deploys.
- Scratch orgs from a Dev Hub give each feature a clean, disposable org.
Finished this lesson?
Mark it complete to track your progress, then carry on with the next lesson.