Lightning Web Components Developer Tools

Install Development Tools

• Lightning Web Components were released in December 2018.
• Lightning web components can be created with any text editor, but its best to use the tooling described below.
• Salesforce CLI is a “swiss army knife” that lets you do a lot from the command line
• Any production or developer edition org can function as a Dev Hub
  • Dev Hubs let you create scratch orgs, which are lightweight orgs that are built to be fast for the most iterative parts of development
    
    
• Lightning Web Components are based on modern web standards, so tooling used to develop them are currently popular tools among web developers
• Includes a command-line interface (Salesforce CLI) that consists of several plugins that provide specific functionality.
  • salesforcedx provides the ability to interact with Salesforce orgs and their data
• Visual Studio Code is the code editor for Salesforce developers. Free, available on Windows, Linux, MacOS, and well-established among web developers
  • Need to install the Salesforce Extension Pack - provides tooling for developing on the Lightning Platform including tools for working with Apex, Visualforce, and a Replay Debugger
• A Scratch org is a dedicated, configurable, and short-term Salesforce environment that can be quickly spun up when starting a new project, feature branch, or feature test.
• A Developer Hub (Dev Hub) is aa main Salesforce org that your team uses to create and manage scratch orgs
  • Enable via: Setup > Quick Find > “Dev Hub” > Dev Hub > Enable

Create a Lightning Web Component

• A Salesforce DX Project, at its simplest, is a folder on your local machine that helps you organize what you’re working with at a given time
  • It contains metadata, configuration files, and code
    
    
• Create a Salesforce DX Project within Visual Studio Code: Ctrl + Shift + P, then SFDX: Create Project. Then Standard, then Enter.
  • A folder will be created on your local computer.
• Authorize Your Dev Hub within Visual Studio Code via Ctrl + Shift + P, then SFDX: Authorize a Dev Hub. A browser opens. Log in with credentials.
  • Authenticating Dev Hub is required before creating a scratch org
• Create a Scratch Org via Visual Studio Code command SFDX: Create a Default Scratch Org. Generally, accepting the defaults is okay.
• To learn more about Salesforce DX, try App Development with Salesforce DX
• Project just created has a special folder, force-app/main/default, that contains all the metadata of the current Salesforce DX project. Lightning web components are also metadata - they are included in a subfolder named lwc
• Ctrl-Shift-P then focus terminal focuses the view on the terminal. Entering sfdx force:lightning:component:create -n myFirstWebComponent -d force-app/main/default/lwc --type lwc creates the needed files for your first Lightning web component.
  • -n: defines the name of the Lightning web component and its files
  • -d: defines the target directory where the Lightning webb component should be created. It must be named lwc
  • --type: specifies that you want to create a Lightning Web Component.
  • Right-clicking the lwc folder provides quick access to the SFDX: Create Lightning Web Component command, which does the same thing
    
    
• Lightning web components consists of three files:
  1. .xml file: metadata definition file. Contains several configuration elements that control where you can add it to the Salesforce user interface using Lightning App Builder.
  2. .js file: javascript file
  3. .html file: HTML file

Example Files

myFirstWebComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>51.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>

myFirstWebComponent.js - note errors are intentionally included in the following. Visual Studio Code highlights syntax errors with a red squiggly line.

import { LightningElement } from 'lwc';
export default class MyFirstWebComponent extends LightningElement {
    @track
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}

myFirstWebComponent.html - note errors are intentionally included in the following. Visual Studio Code highlights syntax errors with a red squiggly line.

<template>
  <lightning-card title="ContactInformation" icon-name="custom:custom14">
     <div class="slds-m-around_medium">
        <template for:each={} for:item="contact">
           <div>
              {contact.Name}, {contact.Title}
           </div>
        </template>
     </div>
  </lightning-card>
</template>

Analyze Your Code and Deploy It to Your Org

• Salesforce Extensions provide built-in debugging:
  • “ESLint,” a common javascript linting tool. Linting is a type of static analysis that shows areas where your code may not adhere to commonly-accepted guidelines
  • Language services support for Apex and Lightning Web Components which provides autocompletion and code hinting as you type
    
    
• From the terminal in Visual Studio Code, sfdx force:source:push deploys metadata to your scratch org
• From the terminal in Visual Studio Code, sfdx force:org:open opens the default scratch org
  
  
• Other references:
  • Trailhead Sample Gallery
  • Lightning Web Component Recipes