Quick Start: Lightning Web Components

Set Up Your Salesforce DX Environment

Install Salesforce CLI. Install Visual Studio Code and extensions for Salesforce DX. Create and deploy a Lightning web component.
  • Lightning Web Components are a new programming model for building Lightning components
    • Uses web standards breakthroughs, can coexist and interoperate with Aura programming model, and is high performance
  • To create and develop Lightning Web Components and use their features, need to set up Salesforce DX
    • Salesforce DX is a set of tools that streamlines the development life cycle

  • First step to setup Salesforce DX:
    Install the Command Line Interface (CLI)
    • Links available on Trailhead and elsewhere
    • You need your username and password to authenticate with the Salesforce CLI
      • Easy to reset passwords in Trailhead orgs with the “Get Your Login Credentials” tab
    • To ensure correct installation use the command sfdx in a command prompt/terminal

Set Up Visual Studio Code

Visual Studio Code is the go-to code editor for Salesforce developers. It's free, open-source, and available for Windows, Linux, and macOS. This editor has easy-to-install extensions for syntax highlighting, code completion, and more.
  1. Install Visual Studio Code
  • Some features like Apex support depend on the Java Platform, Standard Edition development kit (JDK). Only JDK 8 and 11 are supported.
  • It may be necessary to set the location of the Java runtime in Salesforce
    • File > Preferences > Settings > Search apex, then set directory for Salesforcedx-vscode-apex > Java: Home
    • Example location (Linux): /usr/lib/jvm/java-11-openjdk-amd64
  1. In Visual Studio Code, install the Salesforce Extension Pack
  2. Ensure correct installation using the command palette (CTRL-Shift-P) then entering sfdx. This will filter for commands provided by Salesforce Extensions. If it does, everything is set up.

Create a Hello World Lightning Web Component

Now that you’ve set up your development environment, you can create a simple Lightning web component.

  1. Create a Salesforce DX Project

  • Ctrl-Shift-P > “SFDX” > SFDX: Create Project > Standard > “HelloWorldLightningWebComponent” > Select (or create) a folder > Create Project

  1. Authorize Trailhead Playground

  • Ctrl-Shift-P > “SFDX” > SFDX: Authorize an Org > Project Default
  • Log in to the org you want to link
  • CLI will remember your credentials and return something like the following:
Starting SFDX: Authorize an Org

06:27:02.531 sfdx force:auth:web:login --setalias vscodeOrg --instanceurl https://login.salesforce.com --setdefaultusername
Successfully authorized [email protected] with org ID 00D5e000000JW74EAG
06:29:19.683 sfdx force:auth:web:login --setalias vscodeOrg --instanceurl https://login.salesforce.com --setdefaultusername
 ended with exit code 0

  1. Create a Lightning Web Component

  • Ctrl-Shift-P > “SFDX” > SFDX: Create Lightning Web Component
    • (Note: SFDX: Create Lightning Component will create an Aura component, do not use it for this example)
  • Name the new component helloWorld
  • Accept the default filepath force-app/main/default/lwc
  • Three files are created:
    • helloWorld.html
    • helloWorld.js
    • helloWorld.js-meta.xml
  • Update helloWorld.html:
  <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
  • Update helloWorld.js:
import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
  greeting = 'World';
  changeHandler(event) {
    this.greeting = event.target.value;
  • Update helloWorld.js-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">

  1. Deploy to Trailhead Playground

  • Right-click the folder force-app/main/default and then click SFDX: Deploy Source to Org
    • If successful, the Output screen will return something like the following:
06:54:47.357 Starting SFDX: Deploy Source to Org

=== Deployed Source
STATE    FULL NAME   TYPE                      PROJECT PATH                                                
───────  ──────────  ────────────────────────  ────────────────────────────────────────────────────────────
Created  helloWorld  LightningComponentBundle  force-app/main/default/lwc/helloWorld/helloWorld.html       
Created  helloWorld  LightningComponentBundle  force-app/main/default/lwc/helloWorld/helloWorld.js         
Created  helloWorld  LightningComponentBundle  force-app/main/default/lwc/helloWorld/helloWorld.js-meta.xml

06:54:49.958 ended SFDX: Deploy Source to Org

  1. Add Component to App Declaratively

  • Ctrl-Shift-P > “SFDX” > SFDX: Open Default Org will open the org
  • Click cog > Edit Page
  • Drag the helloWorld component from the Custom area of the Lightning Components list to the top of the page canvas.
  • Save and Activate page. The new Lightning web component has been created.