LWC Development Environment

Requirement :

‹

›

Setup LWC Development Environment

1. VS (Visual Stdio) Code

2. Salesforce CLI

Download and install the latest version of Visual Studio Code.
Open the Visual Studio Code and add extensions by clicking on the extensions icon present on the left side of the VS code editor.

Search for Salesforce Extension Pack and install the extension. After that install Lightning Web Components extension.
Once you done with installing the above two extensions Re-launch the VS code editor.
Now it’s time to check that our environment is ready for creating Lightning Web Components by pressing Command + Shift + P on macOS or Ctrl + Shift + P on Windows and type sfdx.

Hola..!! you are now ready to create your Lightning Web Components.

Creating SFDX Project

First create a folder somewhere on your machine and name it trailblazer or anything of your choice.
Navigate to that folder from VS code editor by
File > Open > trailblazer folder > Open

Now we are in the trailblazer folder, Open the terminal in the VS code editor by Terminal > New Terminal

Now will create a project in the trailblazer folder by clicking Command + Shift + P on a Mac or Ctrl + Shift + P on Windows it will open the command pallete
Type sfdx and select SFDX:Create Project

Enter the project name as HelloWorldLwc and press enter.
After the above step a new project is created with the name HelloWorldLwc in the VS code editor with the default project structure as shown :

You can create the project using the command in the terminal of the VS Code.

1
2
sfdx force:project:create --projectname HelloWorldLwc
Now cd HelloWorldLwc to move to the project folder from the terminal

Authorize your Developer Edition.

Open the Command Palette in the VS code by using the Command + Shift + P on a Mac or Ctrl + Shift + P on Windows
View > Command Palette
Select SFDX: Authorize an Org

Select Project Default

Give the alias name(myWorldOrg) or leave blank
After the alias name you will be taken into the login screen where you have give your login credentials of salesforce org.

You can authorize the same by using the CLI with the following command in terminal

1
2
3
4
5


sfdx force:auth:web:login -d -a myWorldOrg
-d  : Specifies the authorized org as default
-a  : Specifies the alias name of the org.

After running the above command it will redirect to the browser asking for the credentials for authorization . Give the username and password of the org u have signed up.
You will see a message as successfully authorized in the terminal after entering your credentials in the browser.

To check the org’s that are connected or authorized by using this command

1
2


sfdx force:org:list

–all : it will give all the orgs that are active and inactive
LWC Authorize your Developer Edition6

Creation of Lightning Web Component :

In the VS code , Press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
Type sfdx then search for sfdx: create lightning web component and select.

Select the path in which the Lightning Web Component to be created. By default the path is under force-app/main/default/lwc.

Creation of Lightning Web Component step19

After that enter the name of the Lightning Web Component as helloExpression (anything of your choice) and press enter.
Now you have successfully created your first LIghtning Web Component helloExpression.

You can check your component under the lwc folder in VS Code editor
Another way of creating the Lightning Web Component is by salesforce cli .
Use this command in the terminal to create a Lightning Web Component and make sure that you are in the project folder in the terminal.

1
2


sfdx force:lightning:component:create --type lwc -n helloExpression -d force-app/main/default/lwc

–type : specifies which type of component you are creating i.e, –type lwc for lightning web component and –type aura for aura components.

-n : specifies the name of the component .

-d : specifies the directory in which we are creating the component.

You will see the above screen when the lightning web component is created.

Code for the helloExpression LWC component.

helloExpression.html

<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
            <lightning-input
                label="Name"
                value={greeting}
                onchange={changeHandler}>
            </lightning-input>
        </div>
    </lightning-card>
</template>

helloExpression.js

import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
    @track greeting = 'World';
    changeHandler(event) {
        this.greeting = event.target.value;
    }
}

helloExpression.js-meta.xml

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

Deploying the component to Org :

In the visual studio code, select the default folder in the project.
Right-click on the default folder, there you will find an option SFDX:Deploy Source to org and select that.

After the successful deployment you will see the following message in the terminal

You can do the same deployment by using the terminal with the command mentioned below

1
2


sfdx force:source:deploy -p force-app -u OrgNameWhichWasCreated

-p : specifies the path from which directory you want to deploy to org from VS Code

–u : specifies the username of the org to which you are deploying the component

Now to open the Org to which we have deployed the component use the command

1
2


sfdx force:org:open -u OrgNameWhichWasCreated

It will automatically open the org in the browser.

Finding the Lightning Web Component in the org:

In the org select the sales app.
Edit the home page of the sales app by clicking the gear icon at the top right corner and then Edit

After selecting the Edit Page you will be navigated to Lightning App Builder of the home page. It should look something like the below page.

Now on the left hand side search for the component helloExpression we have created

Finding the Lightning Web Component in the org step 28

Drag the component on to screen and place it somewhere on the right top corner
Then Click
Save > Activate > Assign as Org Default

Open the sales app from the app launcher .will see the our component at the corner.

Finding the Lightning Web Component in the org step 30

Lightning Web Component

Search This Blog