Setup your Developer Environment For Lightning Web Component (2024)

As you all know, creating a Lightning Web Component in developer console is not possible. You need to write it locally and then push it to your Org. Doing this will need to setup your developer environment. How…. ?

You need a set of tool like Visual studio code, Salesforce command line interface and an Org. Salesforce DX provides you to choose any equivalent tool to them and use for the same.

Note:-Salesforce DX adds new tools that streamline the entire development life cycle. It improves team development and collaboration, facilitates automated testing and continuous integration, and makes the release cycle more efficient and agile.
But Salesforce DX is so much more than just a new set of tools! It provides an alternative to change set development, and shifts the source of truth from the org to your version control system (VCS). It shifts your development focus from org development to package development.

Lets begin with installing Salesforce Command Line Interface. The Salesforce CLI is a powerful command line interface that simplifies development and build automation when working with your Salesforce org. Use it to:

Aggregate all the tools you need to develop with and perform commands against your Salesforce org
Synchronize source to and from scratch orgs
Create and manage orgs
Import and export data
Create and execute tests
Create and install packages

Download the CLI using the appropriate link below.

Operating System	Link to Installer
macOS	https://sfdc.co/sfdx_cli_osx
Windows 32-bit	https://sfdc.co/sfdx_cli_win
Windows 64-bit	https://sfdc.co/sfdx_cli_win64
Debian/Ubuntu 64	https://sfdc.co/sfdx_cli_linux Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.
Debian/Ubuntu x86	https://sfdc.co/sfdx_cli_linux_x86 Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.

Install the CLI through the installer.
Make sure the CLI is properly installed.
Check the Salesforce CLI is working properly or not by using sfdx in command prompts.
Open the terminal app in macOS or the Command Prompt in Windows, and enter sfdx.
You will see this:-

If You are getting below message even after installing it

You need to set the path in Environment Variable by following the below process:-

From the desktop, right click the Computer icon.
Choose Properties from the context menu.
Click the Advanced system settings link.
Click Environment Variables. In the section System Variables, find the PATH environment variable and select it. Click Edit. If the PATH environment variable does not exist, click New.
In the Edit System Variable (or New System Variable) window, specify the value of the PATH environment variable. Click OK. Close all remaining windows by clicking OK. for example:- C:\Program Files\Salesforce CLI\bin.It may get change for you according to path directory.
Reopen Command prompt window, and run your sfdx command.

The PATH is the system variable that your operating system uses to locate needed executables from the command line or Terminal window.

TheSalesforce CLI Command ReferenceGuide contains information about the Salesforce CLI commands and their parameters.

First, What’s an IDE?

An IDE, or integrated development environment, typically consists of a code editor, build automation tools, a debugger, and intelligent code completion. Visual Studio Code provides these.

Let’s Install Visual Studio Code

You can install Visual Studio Code on any computer running macOS, Windows, or Linux. The system requirements are fairly small so it should run on just about any machine.

Update Salesforce CLI and its Plugins :-

Run the below command in your command window:-

sfdx update

It will update the CLI to latest version as well as the its plugin. You will see something like this:-

sfdx-cli: Updating CLI from 6.0.0-0743bea5 to 6.0.0-aebbfd66 (alpha)... donesfdx-cli: Updating CLI... already on latest version: 6.0.0-aebbfd66sfdx-cli: Updating plugins... done

Set Up Linting

Linting finds errors in your code while you’re editing, before you compile. Linting is more than spell-checking, it steers you away from anti-patterns and towards good patterns. Salesforce has created linting rules to minimize Lightning Web Components programming mistakes.

There are two ways to install the ESLint rules.

If you use VS Code, theSalesforce Extension Packextension configures and activates the ESLint rules.Refer image given below.
If you use another code editor, install the ESLint rules from the command line. See thegithub/salesforce/eslint-plugin-lwcandgithub/salesforce/eslint-config-lwcrepositories for instructions.

Bypass the Proxy if you are working on Company firewall

Set Environment variables as follows:
- Navigate to My Computer,right click on it and select Properties and then Advance System settings
- Click on “Environment Variables” button
- On “System variables” section add following two entries
- The above steps may varies for different kind of system
Variable Value
HTTP_PROXY http:// < UserId >:< Password > @proxy.company.com:8080
HTTPS_PROXY http:// < UserId >:< Password > @proxy.company.com:8080

Set Up a Development Org

Developer Edition Sign-up Form

You can develop Lightning web components in scratch orgs and non-scratch orgs. To create scratch orgs, configure an org as a Dev Hub. The Salesforce CLI works a bit differently with scratch orgs than it does with non-scratch orgs. We create a project and go over both workflows inDevelopment Workflows.

What’s a Scratch Org?

Many of the new tools enable you to use a new type of org called a scratch org. A scratch org is a dedicated, configurable, and short-term Salesforce environment. Scratch orgs drive developer productivity and collaboration during the development process, and facilitate automated testing and continuous integration. You can use the CLI or Salesforce Extensions for VS Code to open your scratch org in a browser without logging in. You can spin up a new scratch org when you want to:

Start a new project.
Start a new feature branch.
Test a new feature.
Start automated testing.
Perform development tasks directly in an org.
Start from “scratch” with a fresh new org.

Although scratch orgs are meant to be disposable, the scratch org configuration files contain the real brawn. Through the configuration file, you can configure the scratch org with different Salesforce editions and with just the features and settings you want. And you can share the scratch org configuration file with other team members. That way, you all have the same basic org in which to do your development.

Enable Dev Hub

A Dev Hub provides you and your team with the ability to create and manage scratch orgs. Scratch orgs are temporary Salesforce environments where you do the bulk of your development work in this new source-driven development paradigm.

To get started with scratch orgs, you choose an org to function as your Dev Hub. While you can enable Dev Hub in any paid org, it’s always best to practice somewhere other than production. Instead, go ahead andenable Dev Hubin a Developer Edition org or Trailhead Playground to use with this module.

Launch your Org.
Clickand selectSetup.
From Setup, enterDev Hubin the Quick Find box and select Dev Hub.
To enable Dev Hub, clickEnable.

Enable My Domain in Your Development Org

To use Lightning web components in any org, set up a My Domain name, which is a subdomain within the salesforce.com domain. For example,>trailheadis a subdomain of the Salesforce domain:>trailhead.salesforce.com.

When My Domain isn’t deployed in your org, user interface controls related to Lightning web components may be hidden or inactive.

Create a Salesforce DX Project

A project consists of several local configuration files, as well as the code you want to deploy. In Salesforce terms we call this code metadata, which is the foundation of the Salesforce Platform.

We’ll use Visual Studio Code to create a project.

OpenVisual Studio Code.
PressCommand + Shift + Pon macOS orCtrl + Shift + Pon Windows or Linux, then typecreate project. SelectSFDX: Create Project, and pressEnter.
Entertrailheadas project name, and pressEnter.
Choose a directory on your local machine where the project will be stored. ClickCreate Project.

Authorize Your Dev Hub

InVisual Studio Code, pressCommand + Shift + Pon macOS orCtrl + Shift + Pon Windows or Linux.
Typesfdx.
SelectSFDX: Authorize a Dev Hub.
Log in using your Dev Hub org credentials.
ClickAllow.
After you authenticate in the browser, the CLI remembers your Dev Hub credentials. The success message should look like this:

Create a Scratch Org

In Visual Studio Code, pressCommand + Shift + Pon macOS orCtrl + Shift + Pon Windows or Linux.
Typesfdx.
SelectSFDX: Create a Default Scratch Org….
PressEnterto accept the defaultproject-scratch-def.json.
PressEnterto accept the defaulttrailheadscratch org alias.
PressEnterto accept the default7 daysscratch org duration.
Be patient, creating a scratch org can take a minute. The success message should look like this:

Create a Lightning Web Component

Creating a Lightning web component is a straightforward process. And Salesforce CLI already created a project structure that helps make getting started even easier.

The folder structure looks like this:

The project we created has a special folder,force-app/main/default. This folder, called a package directory, contains all the metadata of your current Salesforce DX project. Because Lightning web components are also metadata, they are stored in a subfolder namedlwc. In the next step, we add a Lightning web component to this folder.

We can use Visual Studio Code for creating a Lightning web component, just as we did to create the Salesforce DX project. Or we can use Salesforce CLI directly.

OpenVisual Studio Code.
PressCommand + Shift + Pon macOS orCtrl + Shift + Pon Windows or Linux, then typefocus terminal.PressEnter.
Entersfdx force:lightning:component:create -n myFirstWebComponent -d force-app/main/default/lwc --type lwc, and confirm withEnter.

This creates the needed files for your first Lightning web component.

These are the parameters you used in the command.

-n — This defines the name of the Lightning web component folder and its files.
-d — This defines the target directory where the Lightning web component should be created. The target directory must be namedlwc
–type — This specifies that you want to create a Lightning Web Component.

Its all about setting the Developer Environment for creating Lightning Web Component.