Salesforce have just announced one of the most exciting changes to the platform and to web development in general:

Lightning Web Components (or LWC)

See the official announcement on Salesforce here: https://www.salesforce.com/blog/2018/12/introducing-lightning-web-components-with-javascript

This is a new way to write UI code on the Salesforce platform using modern web standards. This means as web developers we can finally write standard HTML, DOM and JavaScript with little to no proprietary syntax. I’m talking about pure ES6 JavaScript classes, import statements, normal DOM Events, Template DOM nodes and more!

In this post I’ll cover how to get started with your first Lightning Web Component on Salesforce.

1. Getting a Salesforce Org

First go to https://www.salesforce.com/form/signup/prerelease-spring19/ and signup for a pre-release “Developer” org (be sure to choose Developer in the last step).

You’ll receive a confirmation email to verify your account. Click through the link and setup a password. You should be logged into your org’s settings screen. Using “Quick Search” on the left sidebar enter “Dev Hub” and choose the “Dev Hub” option.

2. Install the Salesforce DX CLI tools

The CLI tool will help deploy your code to the org. Install it from: https://developer.salesforce.com/tools/sfdxcli

We need to use the pre-release version of the tool at the moment whilst LWC is in pre-release. You’ll need to open a command prompt/terminal and enter the following:

sfdx plugins:install salesforcedx@pre-release

This will install the pre-release version of dx which should be version 45.0.12 or higher. You can verify this by running:

sfdx plugins

Salesforce DX has a lot of cool features. I highly recommend following the Getting Started with DX Trailhead

3. Install Visual Studio Code

Next up we’ll be using Visual Studio Code to write our components. Whilst there are other editors out there, Salesforce has written plugins to simplify LWC development. Download the latest version from: https://code.visualstudio.com/.

Once it’s installed and running, click the Extensions icon in the left sidebar and you’ll need to install 2 extensions:

• Salesforce Extension Pack
• Lightning Web Components

You’ll need to restart Visual Studio Code after installing these, click the blue “Restart” button. You should see a list similar to this if they installed correctly:

4. Creating our first project

Now with the plugins installed we can start our project! Firstly we’ll use the tool to bootstrap a new project for us. Press Command + Shift + P on Mac, or Ctrl + Shift + P on Windows, and in the box type “sfdx: create project“. It will prompt you to enter a project name, I chose MyFirstLWCProject, and a folder to place the project:

Now let’s write some code. Press Command + Shift + P on Mac, or Ctrl + Shift + P on Windows, and enter “sfdx: create lightning web component“, choose the suggested directory by hitting Enter and name it “helloComponent“:

From here open the helloComponent.html file and enter:

<template>
    <lightning-card title="Hello World" icon-name="custom:custom103">
        <div class="slds-m-around_medium">
            <p>Hello, {person}!</p>
            <lightning-input label="Name" value={person} onchange={updatePerson}></lightning-input>
        </div>
    </lightning-card>
</template>

And in the helloComponent.js replace the contents with:

import { LightningElement, track } from 'lwc';
 
export default class HelloComponent extends LightningElement {

     @track person = 'World';

     updatePerson(event) {
         this.person = event.target.value;
     }

 }

Then finally, we need to update the helloComponent.js-meta.xml with:

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

Now save all your changes and we’re ready to deploy the code to our org.

5. Connecting to our org

We need to get Visual Studio Code connected to our org, so first we need to authorize our newly created Dev Hub. Press Command + Shift + P on Mac, or Ctrl + Shift + P on Windows, and enter “sfdx: authorize a dev hub“, this will launch your browser and ask you to log in with your newly created Salesforce org. If you don’t remember the username for it then check the email you got sent with the verification link:

After being logged into return to Visual Studio Code and next we’ll create a Scratch Org to use. Press Command + Shift + P on Mac, or Ctrl + Shift + P on Windows, and enter “sfdx: create a default scratch org“. Hit Enter to set the default for project-scratch-def.json and then enter the name as MyFirstLwcScratchOrg. This usually takes a minute or so to complete.

 6. Pushing code to the org

Now we’re ready to push code to the org. Press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows (this will be muscle memory soon!), and type “sfdx: push source to default scratch org“. 

7. Viewing it in the org

After it’s been pushed we can go view it in the org. Press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows and type “sfdx: open default org“. This will open the org in your browser. Click the App launcher in the top left corner and choose the “Sales” app. Click the “Gear” icon in the top right and choose “Edit page“. This will open App Builder, use the search in the left column and type “helloComponent“. Drag and drop your component to the canvas in the middle in the top of the right column. Finally hit “Save“, this will ask if you want to activate this page as default in the org. Hit “Activate“, then “Assign as Org Default“. Then hit “Save” in App Builder one last time before hitting “Back“.

Now if you don’t see your component refresh your browser tab. After that you should see your first Lightning Web Component! Try changing the text in the input box and you should see the text in the message also update!

For more information about Lightning Web Components check out the great post by Christophe Coenraets over on the Salesforce Developer blog: https://developer.salesforce.com/blogs/2018/12/introducing-lightning-web-components.html