If you are completely new to Salesforce development, this guide will help you set up a Salesforce DX project locally, connect it to your Salesforce sandbox, create your first Lightning Web Component (LWC), and deploy it successfully.

This guide is intentionally written in simple language so that even someone with zero coding setup experience can follow it step by step.

What We Are Going to Build

We will do this in small steps:

1. Install Salesforce development tools

2. Create a Salesforce DX project locally

3. Connect the project to a Salesforce sandbox

4. Retrieve Apex code from Salesforce

5. Create a Lightning Web Component (LWC)

6. Deploy the component to Salesforce

7. Add the component to Experience Cloud

8. Handle common deployment errors

This step-by-step approach is important because it helps you test one thing at a time instead of debugging everything together.

What Is Salesforce DX?

Salesforce DX is Salesforce’s modern development framework.

In simple words:

• It lets developers write Salesforce code locally on their computer

• Track changes using Git

• Deploy code to Salesforce orgs

• Work like professional software teams

Tools You Need to Install

Install these 3 tools first.

1. Install Visual Studio Code

Visual Studio Code

This is the editor where you will write Salesforce code.

2. Install Salesforce Extension Pack

Salesforce Extension Pack

This adds Salesforce support inside VS Code.

It helps with:

• Apex development

• Lightning Web Components

• Deployments

• Debugging

• Org authentication

3. Install Salesforce CLI

Salesforce CLI

The Salesforce CLI allows your computer to communicate with Salesforce orgs using terminal commands.

Validate Salesforce CLI Installation

After installing CLI, open PowerShell and run:

Get-ChildItem "C:\Program Files\sf"

Then:

Get-ChildItem "C:\Program Files\sf\bin"

You should see:

sf.cmd

or

sf.exe

Now validate installation:

& "C:\Program Files\sf\bin\sf.cmd" --version

If that fails, try:

& "C:\Program Files\sf\bin\sf.exe" --version

Fix PATH Issue (Most Common Beginner Problem)

If sf --version does not work, your PATH variable is probably missing.

Fix PATH in Windows

Search:

Environment Variables

Open:

Edit the system environment variables

Then:

• Click "Environment Variables"

• Under User Variables select Path

• Click Edit

• Click New

• Add:

C:\Program Files\sf\bin

Click OK everywhere.

Close PowerShell and reopen it.

Now test:

sf --version

Quick Temporary PATH Fix

If you want to test quickly:

setx PATH "$($env:PATH);C:\Program Files\sf\bin"

Then run:

sf --version

Create Your First Salesforce DX Project

Step 1: Open VS Code

Open:

Visual Studio Code

Step 2: Open Terminal

Inside VS Code:

Terminal → New Terminal

Step 3: Navigate to Documents Folder

cd "C:\Users\YourUserName\Documents"

Replace YourUserName with your Windows username.

Step 4: Create Salesforce Project

Run:

sf project generate --name preference-center

This creates a standard Salesforce DX project.

Open the Project in VS Code

Run:

code "C:\Users\YourUserName\Documents\preference-center"

Verify Project Structure

You should now see:

preference-center

 force-app

 manifest

 sfdx-project.json

The file:

sfdx-project.json

confirms this is a valid Salesforce DX project.

Connect VS Code to Your Salesforce Sandbox

Now we connect your local project to Salesforce.

Run:

sf org login web --instance-url https://economist--mcn.sandbox.my.salesforce.com --alias mcnsandbox --set-default

What happens:

• Browser opens

• Salesforce login page appears

• Login to sandbox

• Click Allow

• Return to VS Code

Verify Connected Orgs

Run:

sf org list

You should see:

• Your sandbox

• Alias

• Connected status

• Default org

Retrieve Existing Apex Class From Salesforce

If you already created Apex inside Salesforce UI, pull it locally.

Example:

sf project retrieve start --metadata ApexClass:PreferenceCenterController

This downloads the Apex class into your local project.

Create Your First Lightning Web Component (LWC)

We will create:

preferenceCenter

An LWC usually contains:

• HTML

• JavaScript

• Metadata XML

Method 1 (Recommended): Create LWC Using CLI

Run:

sf lightning generate component --type lwc --name preferenceCenter --output-dir force-app/main/default/lwc

This automatically creates:

force-app/main/default/lwc/preferenceCenter

Inside it:

preferenceCenter.html

preferenceCenter.js

preferenceCenter.js-meta.xml

Method 2: Create LWC From VS Code UI

Alternative method:

• Right-click lwc

• Select:

SFDX: Create Lightning Web Component

• Enter:

preferenceCenter

Add Basic LWC Code

preferenceCenter.html

<template>

   <div style="padding:20px;background:#ffffff;border-radius:8px;">

       <h2>Manage Your Preferences</h2>

       <p>This is my first Lightning Web Component.</p>

   </div>

</template>

preferenceCenter.js

import { LightningElement } from 'lwc';

export default class PreferenceCenter extends LightningElement {}

preferenceCenter.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

   <apiVersion>66.0</apiVersion>

   <isExposed>true</isExposed>

   <targets>

       <target>lightningCommunity__Page</target>

       <target>lightningCommunity__Default</target>

   </targets>

</LightningComponentBundle>

Why is isExposed=true Important?

Without this:

<isExposed>true</isExposed>

your component will NOT appear in Experience Builder.

This is one of the most common beginner mistakes.

Deploy LWC to Salesforce

Run:

sf project deploy start --source-dir force-app/main/default/lwc/preferenceCenter --target-org mcnsandbox

If deployment succeeds, your component now exists in Salesforce.

Open Experience Builder

Now go to your Experience Cloud site.

Open:

Experience Builder

On the left component panel, search:

preferenceCenter

Drag the component onto the page.

Then:

Save → Publish

Verify Everything Works

You should now see:

Manage Your Preferences

This is my first Lightning Web Component.

on the page.

At this point, you have successfully:

• Set up Salesforce DX

• Connected sandbox

• Created an LWC

• Deployed code

• Added component to Experience Cloud

That is a huge milestone for a beginner.

Common Errors and How to Fix Them

Error 1: 'sf' is not recognized

Problem

CLI PATH issue.

Fix

Add:

C:\Program Files\sf\bin

to Environment Variables PATH.

Error 2: Authentication Failed

Problem

Wrong sandbox URL or login issue.

Fix

Use correct sandbox URL:

sf org login web --instance-url https://yourdomain--sandbox.sandbox.my.salesforce.com

Error 3: Component Not Visible in Experience Builder

Problem

Missing:

<isExposed>true</isExposed>

or wrong targets.

Fix

Ensure:

<target>lightningCommunity__Page</target>

<target>lightningCommunity__Default</target>

exist in XML file.

Error 4: Deployment Failed

Problem

Syntax error in code.

Fix

Read terminal carefully.

Usually:

• Missing semicolon

• Invalid import

• Wrong XML syntax

Error 5: No Default Org Set

Problem

Salesforce CLI doesn't know where to deploy.

Fix

Run:

sf org login web --set-default

or:

sf config set target-org=mcnsandbox

Helpful Salesforce CLI Commands

Login to Org

sf org login web

List Connected Orgs

sf org list

Retrieve Metadata

sf project retrieve start --metadata ApexClass:PreferenceCenterController

Deploy Metadata

sf project deploy start --source-dir force-app/main/default/lwc/preferenceCenter

Check Org Information

sf org display

Open Default Org

sf org open

Recommended Learning Order for Beginners

Do not try to learn everything together.

Best order:

1. Salesforce CLI

2. VS Code

3. Salesforce DX

4. Apex basics

5. Lightning Web Components

6. Deployment

7. Experience Cloud

8. Git and version control

This reduces confusion massively.

Final Thoughts

Most beginners struggle with Salesforce development because they try to:

• build everything together

• debug multiple problems at once

• skip environment setup

Instead:

• set up tools first

• create a tiny component

• deploy small changes

• test one layer at a time

That is how professional Salesforce developers work in real projects.

Deployment Tips

sf org login web --instance-url https://economist--mcn.sandbox.my.salesforce.com --alias mcnsandbox --set-default

sf org list

sf project retrieve start --metadata ApexClass:PreferenceCenterController

sf lightning generate component --type lwc --name preferenceCenter --output-dir force-app/main/default/lwc

sf org login web --instance-url https://economist--mcn.sandbox.my.salesforce.com --alias mcnsandbox --set-default

to deploy: sf project deploy start --source-dir force-app/main/default/lwc/preferenceCenter --target-org mcnsandbox