Developing Your First Simple Lighting Web Component

I Requirements:

II Creating Scratch ORG

Create a folder for your web component and open the folder in Visual Code Studio.

Log into your Dev Hub using:

sfdx force:auth:web:login -d -a YOUR-DEV-HUB-ALIAS

where YOUR-DEV-HUB-ALIAS is whatever alias you would like to give your Dev Hub

Open Terminal window in Visual Code Studio and type your command. In below screen shot, vsclogin is my dev-hub alias

Now you have authenticated environment, create a scratch environment from your logged in DevHub.

sfdx force:org:create -f config/project-scratch-def.json -s -a lwcworkshop -d 30 -w 10

Launch newly created scratch org using:

sfdx force:org:open

It is always good to pull existing files from scratch ORG before starting to make new changes. Pull the files from scratch org using:

sfdx force:source:pull

Sam way you can push changes from your local directory to scratch org using:

sfdx force:source:push

Assign yourself all access so that you can perform development smoothly.

sfdx force:user:permset:assign -n All_Access

III Creating HelloWorld Lighting Web Component

Use View > Command Palette or Cmd/Ctrl + Shift + P to open the Command Palette.
From the Command Palette, select SFDX: Create Lightning Web Component. This SFDX command is coming from Salesforce Extension.

Give the component the name of helloWorld and press Enter/Return.
Confirm that the default directory is force-app/main/default/lwc and press Enter/Return.
In the File Explorer, toggle open the newly created lwc/helloWorld folders.

Lighting Aura component needs upto 8 files but Lighting Web Component needs atleast need only one file i.e. javascript file.

hellowWorld.html file is UI/Mark up file. This file is optional when you can Web Component to serve only business logic.

helloWorld.js is javascript file where all logic resides.

First line is the basic framework line which import Lighting Elements from lwc framework.

Line 3, we are creating HelloWorld class (TitleCase) and exporting that class to be used in component. So any new code for the component will be inside {} braces of line 3.

helloWorld.js-meta.xml has configuration for the compoent. Interfaces being used in component, version, global settings.

Open helloWorld.html and add Hello, World on line 2.
Save the file.

III Add the component to a page

Open helloWorld.js-meta.xml.

Change the value to true. This is equivalent to setting global=true on Aura component. This is required to be true if we want to access this component in another component.

Add the following to a new line on line 5:

lightning__AppPage

lightning__RecordPage

lightning__HomePage

Target tags specifies, what kind of pages this web component is going to be used on. So we are setting this component to be used on App, Record and Home types of pages.

Time to push changes to default scratch org. Push the changes to scratch org using below command in Command Palette.

SFDX: Push Source to Default Scratch Org

You can verify if push command was successful by noticing Output panel for log.

Once changes are push, open default scratch org and lets check our web component.

If you scratch ORG is not opened in the browser, you can open scratch ORG using below command in Terminal panel.