Setting Up Your Development Environment

Before you start building Lightning Web Components, you need to set up your development environment. The following steps will guide you through installing the necessary tools.

Installing Salesforce CLI

Salesforce CLI (Command Line Interface) is a powerful tool that helps developers interact with their Salesforce org, push and pull metadata, and manage deployments.

1. Download the Salesforce CLI from Salesforce Developer Website.







2. Install the CLI based on your OS:
• Windows: Run the .exe installer.
• Mac: Use Homebrew (brew install sfdx).
• Linux: Use .tar.gz package and extract it.

I highly recommend you to follow the steps from salesforce’s official document. click here.



3. Verify the installation: Open a terminal/command prompt and run:

sfdx --version

This should return the installed version number.

Setting Up Visual Studio Code

Visual Studio Code (VS Code) is the recommended code editor for LWC development. It provides powerful extensions and debugging tools for working with Salesforce.

Steps to Set Up VS Code:

1. Download and install VS Code from Visual Studio Code Website.
2. Install the Salesforce Extension Pack from the VS Code marketplace.


• Click on the symbol Extension shown in the below image.





• Type Salesforce extension pack in search box and click install as shown in below image.





3. Open VS Code and ensure that the Salesforce CLI is recognized by running:

sfdx --version

4. (Optional) Install Prettier and ESLint extensions for better code formatting.

Creating a Salesforce DX Project

Once you have Salesforce CLI and VS Code set up, you can create your first Salesforce DX project.

1. Open VS Code and launch the terminal (Ctrl + ~ on Windows, Cmd + ~ on Mac).
2. Run the following command to create a new Salesforce DX project:

sfdx force:project:create -n myLWCProject

• Replace myLWCProject with your desired project name.
3. Navigate to the newly created project folder:

cd myLWCProject

4. Authorize your Salesforce org (login required):

sfdx auth:web:login

• This will open a browser window for you to log in to your Salesforce org.
• Once logged in, the CLI will store your authentication details.
5. Set the default org for your project:

sfdx force:config:set defaultusername=yourOrgAlias

• Replace yourOrgAlias with a meaningful name for your org.

Now, your development environment is ready! You can start building Lightning Web Components inside your Salesforce DX project.