Setup your Developer Environment For Lightning Web Component

sanketthoughts

7 years ago

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.

The Salesforce CLI Command Reference Guide contains information about the Salesforce CLI commands and their parameters.

Step 2:- Install an IDE

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.

Download and install the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, there’s no need to reinstall it.
Launch Visual Studio Code.

Install the Salesforce Extension Pack

Now that we have Salesforce CLI installed, we can supercharge Visual Studio Code by installing the Salesforce Extension Pack. The extension pack installs the essential Salesforce extensions all at once, saving you from selecting each one individually.

The extensions provide deep integrations with Salesforce tooling throughout VS Code. You can invoke Salesforce CLI from a variety of places (VS Code menus, shortcut keys, and right-click context menus).

New functionality shows up as you’re working, including:

Language Services for Apex
Language Services for Visualforce
Language Services for Lightning Components (Aura and Lightning Web Components)
Integrations in the activity bar for Apex tests and Replay Debugger.

Steps to follow:-

Launch Visual Studio Code.
On the left toolbar, click the Extensions icon .
Enter Salesforce Extension Pack in the search field.

You will see like this:-

Click into the card that says Salesforce Extension Pack. Then in the newly launched window, click the green Install button. It may take a while to get installed.

Once you Installed it, You don’t need to reload the Visual studio code, You can start using it.

Note:- Salesforce has made Lightning Web Component Extension as a part of Salesforce extension pack. Hence, You do not need to install it separately. Refer below image:-

Few more steps to go, To work with Lightning web components, you need version 45 or greater of the Salesforce CLI.

Open your Command panel and type:-

sfdx plugins --core

The command outputs version numbers.

@salesforce/plugin-generator 1.0.1 (core)
@salesforce/sfdx-trust 2.0.1 (core)
builtins 1.0.0 (core)
salesforcedx 45.1.2

NOTE:- If you had a prerelease version of the CLI installed, run this command to update it.

sfdx plugins:install salesforcedx@latest

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)... done
sfdx-cli: Updating CLI... already on latest version: 6.0.0-aebbfd66
sfdx-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, the Salesforce Extension Pack extension 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 the github/salesforce/eslint-plugin-lwc and github/salesforce/eslint-config-lwc repositories 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 in Development 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 and enable Dev Hub in a Developer Edition org or Trailhead Playground to use with this module.

Launch your Org.
Click and select Setup.
From Setup, enter Dev Hub in the Quick Find box and select Dev Hub.
To enable Dev Hub, click Enable.

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, >trailhead is 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.

Open Visual Studio Code.
Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux, then type create project. Select SFDX: Create Project, and press Enter.
Enter trailhead as project name, and press Enter.
Choose a directory on your local machine where the project will be stored. Click Create Project.

Authorize Your Dev Hub

In Visual Studio Code, press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux.
Type sfdx.
Select SFDX: Authorize a Dev Hub.
Log in using your Dev Hub org credentials.
Click Allow.
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, press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux.
Type sfdx.
Select SFDX: Create a Default Scratch Org….
Press Enter to accept the default project-scratch-def.json.
Press Enter to accept the default trailhead scratch org alias.
Press Enter to accept the default 7 days scratch 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 named lwc. 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.

Open Visual Studio Code.
Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux, then type focus terminal. Press Enter.
Enter sfdx force:lightning:component:create -n myFirstWebComponent -d force-app/main/default/lwc --type lwc, and confirm with Enter.

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 named lwc
–type — This specifies that you want to create a Lightning Web Component.

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

Variable	Value
HTTP_PROXY	http:// < UserId >:< Password > @proxy.company.com:8080
HTTPS_PROXY	http:// < UserId >:< Password > @proxy.company.com:8080