Get Started with Lightning Web Components

February 16, 2024

This blog is a guide to help you set up your developer environment for learning Lightening Web Components in Salesforce. The information is available on multiple Salesforce Trailheads, including 

However, the steps are often scattered across different trailhead modules, which can be confusing. This is a one-stop reference to get you started with LWC’s quickly and easily.

Before starting to learn about Lightning Web Components, it’s important to note that Salesforce Trailheads assume the users have a basic understanding of HTML, CSS, and Javascript. The introductory lessons provide a quick refresher on key topics such as modules, classes, asynchronous functions, and encapsulation. However, these lessons are brief and primarily serve as a bridge to connect these concepts to the specific ways they are often used within the Salesforce Ecosystem.

If you are interested in gaining a deeper understanding of HTML, CSS and JavaScript or if you are a beginner and want to learn these languages, I highly recommend two free resources: Free Code Camp and The Odin Project. Both of these resources offer complete curriculums and lessons for responsive web design. They cater to all levels, from beginners to intermediate and expert levels.

Assuming you are comfortable with HTML, CSS, and JS, the next step is to install and configure the required tools on your machine. This will allow you to complete the Trailhead lessons.

Step 1: Download VS Code

Visual Studio Code, or VS Code, is a free code editor optimized for building and debugging modern web and cloud applications. You can download VS Code for Mac, Linux, and Windows from the following stable download links: VS Code Downloads. Simply follow the instructions provided on the website to download and install VS Code on your device.


Note: Please keep in mind that you might have used other code editors like Atom or Sublime before. However, I strongly suggest you switch to VS Code for working through the Trailheads. The Trailheads assume that you are using VS Code with the SFDX Extension Pack, and VS Code will be referred to in the screenshots, videos, and deployment instructions.

Step 2: Download the SFDX Extension Pack

Once you have downloaded VS Code, open the application and locate the “Extensions” icon from the left toolbar. Search for and install the “Salesforce Extension Pack.”

This pack is the only extension you need to begin. However, if you are new to VS Code, I also recommend installing the Prettier extension as well. This extension helps to automatically format and maintain consistent styling, making your code more readable and easier to debug.

Step 3: Install Salesforce CLI

The Salesforce CLI is an efficient command line interface that simplifies various Salesforce processes, such as creating and managing orgs, importing and exporting data, and creating and installing packages, among many others. To get started, use this link Salesforce CLI and download the correct package for your operating system. Once the installation is complete, you need to restart your Code Editor and Command Line. After restarting, run SF Update to confirm the successful installation and view the current edition installed.

Step 4: Install Node and NPM

Node.js is an open-source, cross-platform JavaScript runtime environment that enables you to run JavaScript on your computer outside of a web browser. Node.js extends Javascript functionality to be able to run on your computer to do all kinds of neat tricks like open a file, start a server or connect with other computers. Using Node.js and NPM, Node Package Manager, you can download and maintain all kinds of free code packages for use on your projects. For instance, once you complete some trailheads, you will eventually need to download Jest via NPM, which is a JavaScript Testing Framework. Jest is not necessary to start with the first trailheads, but it is essential to test and deploy real-world applications correctly.

To install Node and NPM it is highly recommended to use a Node Version Manager, like NVM on Mac or NVM-windows on Windows. You can find detailed instructions to install Node on your specific operating system at this link: NPM JS Downloading and Installing. 

To install NVM on a Mac, open your terminal and run the following:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash 

This command will download and run a script from the nvm repository, which will clone the repository to your device. For the majority of users, this command should run without any problems. However, depending on the version of your Mac operating system, you may encounter some common issues. These issues are documented in the troubleshooting section of the complete installation guide, which can be found here: NPM JS Troubleshooting 

Once completed, close and re-open your terminal window and run nvm –version to verify a successful nvm installation. Finally, to install both Node and NPM, run nvm install node in your terminal.

You can verify the install was successful by checking the current versions with the commands: Npm -v & Node -v .

Step 5: Install Git

Git and Github may sound similar, but they are two different tools that work together as a Version Control System (VCS). Using a VCS like Git allows you to work on new features without risking bugs in production and collaborate with multiple developers on the same project. Each developer can work on a different branch and merge changes together. Git tracks all changes made by the developers.

Depending on your system setup, Git may already be installed. For instance, most Mac versions come with Git pre-installed. You can check by opening your terminal and running Git --version.


If you don’t have Git installed on your system, you can get detailed instructions for installation by visiting Git Guides – Install Git. Follow the instructions relevant to your operating system and once you have completed the installation, run Git --version again to confirm that you have the latest version.

Step 6: Create a Github Account

GitHub is a platform for developers that enables them to create, store, manage, and share their code. You may often be directed to a project on GitHub, also known as a “repo,” in the Salesforce Trailhead (and in real life) to copy a set of starter files. These files are essential for completing the project, and having a GitHub account makes this possible.

To create a free Github account, go to Github.com and click on “Sign Up”. If you are new to Github, you can refer to this blog post Github – Getting Started which provides an excellent resource for beginners. It covers topics such as creating a repository, starting a new branch, making changes to a file, and pushing them to Github as commits.

Summary

TL;DR, these are the steps you need to follow to get started with LWC’s:

  1. Download VS Code
  2. Install SFDX Extension Pack extension in VS Code
  3. Install the Salesforce CLI
  4. Download Node.js and NPM
  5. Install Git
  6. Create a Github Account

Once you have completed these steps, you will be ready to learn about Lightening Web Components and start your first Trailmixes. Happy Coding!

Profile picture

Written by Saul who lives and works in Boise, ID. You should connect with them on Linkedin.