Quick Start: Lightning Web Components

Set Up Your Salesforce DX Environment

• 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

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

2. In Visual Studio Code, install the Salesforce Extension Pack
3. 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

1. Create a Salesforce DX Project

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

2. 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

3. 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:

<template>
  <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>
    </div>
  </lightning-card>
</template>

• 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">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

4. 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

5. 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.