Lightning Web Component development using Salesforce DX

Dennis

Lightning web components are custom HTML elements built using standard JavaScript and HTML making them lightweight and able to deliver exceptional performance. In this blog, we will discuss on using Salesforce DX to create a Lightning Web Component that can be placed on the Salesforce home page. The widget will use OpenWeatherMap API to provide weather information of the City selected by the user.

Setting up Salesforce DX

To start building Lightning web components, we need to setup Salesforce DX first. This step includes installing Salesforce CLI, Visual Studio Code and Salesforce Extension Pack for VS Code.

Salesforce CLI

Download & Install Salesforce CLI from https://developer.salesforce.com/tools/sfdxcli . CLI is available for Windows, Mac & Linux operating systems.

Verify the installation by opening a Terminal/command window and type ‘sfdx’ which should display the Salesforce CLI version as shown below.

Visual Studio Code & Salesforce Extension Pack

Install Visual Studio Code for your operating system from the following URL

https://code.visualstudio.com/

After installing and opening VSCode, go to Extensions on the left side-bar and search for Salesforce Extension Pack and install the extension.

You can also install it from this url:     https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode

 

Enable & Authorize Dev Hub

To create and manage scratch orgs, we need to enable Dev hub in our org. We can use Developer, Enterprise, Performance, and Unlimited Edition orgs as the Dev hub.

 

Enable Dev Hub:

1. Login as System Administrator
2. Go to Setup, enter Dev Hub in the Quick Find box
3. Select Dev Hub.
4. Click Enable.

After you enable Dev Hub, you can’t disable it.

Authorize Dev Hub

We can authorize a Dev Hub by logging in to it from the CLI. In VS Code terminal, use the following command to login to the dev hub using your credentials:-

sfdx force:auth:web:login -d -a DevHub

This command will also set this org as the default dev hub and assign the alias ‘DevHub’ to it.

You can open the dev hub using the following command

sfdx force:org:open -u DevHub

Create Salesforce DX Project

So we have successfully set up Salesforce DX. And now we can start developing the Lightning web component for weather widget.

Create new SFDX Project

1. In VS Code, go to View -> Command Palette…
2. Enter sfdx: create project
3. Select SFDX: Create Project
4. Enter a project name (Eg: sf-weatherApp)
5. Select a folder to save the project files

You can also run the following command in the VS Code Terminal to create a project

sfdx force:project:create –projectname <project-name>

 

I have made the sf-weatherapp project available in my bitbucket repository:-

https://bitbucket.org/dennisjs/sf-weatherapp/src/master/

You can clone this and open in VS code to access the source code.

 

Create a Default Scratch Org

We use scratch orgs for developing our Lightning web component. A Scratch org is a disposable deployment of Salesforce code and metadata. They are fully configurable, allowing developers to emulate different Salesforce editions with different features and preferences. You can read more about scratch orgs here.

 

1. To create a default scratch org:
2. In VS Code, open Command Palette…
3. Enter sfdx: create
4. Select SFDX: Create a Default Scratch Org

 

Alternatively you can run the following terminal commands for creating and opening scratch orgs:-

Create a scratch org

sfdx force:org:create -f config/enterprise-scratch-def.json -a MyScratchOrg

Open the scratch org

sfdx force:org:open

 

Create project components:-

Create Custom Setting

We use custom setting ‘Weather_Widget_Configuration__c’ to store the weather widget data as in the following table.

 

Field	Type	Description
API_Key__c	Text	Store the API key for consuming OpenWeatherMap API
City__c	Text	Store City name
Icon_Name__c	Text	Name of the weather icon to display on the widget
Last_Synced_on__c	DateTime	Stores the date & time of last sync with API
Temperature__c	Number	Temperature value from the API
Weather__c	Text	Weather description from the API

 

Configure this custom setting in the scratch org and pull it to the source by running the following command in the Terminal.

sfdx force:source:pull

 

Create Apex Class

We use the Apex Class ‘WeatherWidgetController’ containing two @AuraEnabled methods to manage widget data.

Create Apex class:-

1. In VS Code, open Command Palette…
2. Select SFDX: Create Apex Class…
3. Enter ‘WeatherWidgetController’ as name

Add the following code to the class

The refreshWeather() method calls the OpenWeatherMap API and store the weather data in the Custom setting.

The getLastSyncDetails() method serves the last synced weather data from the custom setting on loading the Lightning web component.

Push the changes to the scratch org by running the following command in the Terminal.

sfdx force:source:push

You can also use the following command to list the changes made to project source and scratch org so that you can push/pull accordingly

sfdx force:source:status

Create Lightning Web Component

Now we can create the Lightning web component to display weather information of the city specified by the user.

Create Lightning web component

1. In VS Code, open Command Palette…
2. Select SFDX: Create Lighting Web Component
3. Enter ‘weatherWidget’ as name

A new component folder named weatherWidget including the following files will be created automatically under the lwc folder

• html – Component HTML File
• js – Component JavaScript File
• js-meta.xml – Component Configuration File

Open the weatherWidget.html file and replace its contents with the following:-

The component javascript contains methods to display the weather information and also passes the user provided city name and api key to the apex controller to call the API.

Finally we need to edit the weatherWidget.js-meta.xml file to define the metadata values for the component.  Add the following to the file and save.

Here we’ve configured to make this component available in the App Builder to add as a HomePage component.

Now we have completed development of our weather widget. Now push the changes to the scratch org using sfdx force:source:push command.

Configure Remote Site Setting

We need to add https://api.openweathermap.org to the Remote Site Settings in the scratch org in order to successfully make the API call from our widget. After adding, we can pull it to the project source using sfdx force:source:pull command.

Finally, test the Lightning web component

 

Get OpenWeatherMap API key

As mentioned previously, we will be using the OpenWeatherMap to get the weather data. To use the API, we need an API Key.

Sign up for a free account in https://openweathermap.org/api

Generate an API Key from the API keys section

Keep the API key handy as we will need it for testing the widget.

Add the component to the Homepage

We can add our widget to the home page using the Lightning App Builder.

Run the Widget!

Once the component is added using App Builder, we can go to the homepage and see the widget loaded.

On initial run the widget will ask for City name and API key. Enter a city and provide the API key generated in the earlier step and the widget will display the current weather information.

User can edit the city name later without providing the API key again as it is already saved in the custom setting.