Vlocity UI Architect Matt Goldspink, Shares How to Get Started With Salesforce Lightning Web Components
At Vlocity, Matt Goldspink focuses on developing beautiful user interfaces using Salesforce’s Lightning technology, and with Salesforce's announcement of exciting changes to the platform, web development in general just got even more interesting.
Lightning Web Components (or LWC)
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:
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:
And in the helloComponent.js replace the contents with:
Then finally, we need to update the helloComponent.js-meta.xml with:
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 Enterto 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!