lightning web component - sfdcmonkey

How to Create Lightning Web Component And Deploy To The Salesforce Org

Lightning Web Component

Introducing Lightning Web Components

Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

To create a lightning web component first you need the following prerequisites
  1. Salesforce Org setup

  2. Salesforce CLI

  3. Visual studio code setup with the extensions

Salesforce Org setup

  • Let’s personalize the org which we created by registering a domain by searching My Domain in quick find box.
  • Once done with creating the domain Deploy to Users.
  • In the quick find box search Dev Hub and click enable.

Version of salesforce CLI

  • First download and install the CLI  in your machine by using the links based on your OS:
Operating System Link to Download
macOS https://sfdc.co/sfdx_cli_osx
Windows 32-bit https://sfdc.co/sfdx_cli_win
Windows 64-bit https://sfdc.co/sfdx_cli_win64
Debian/Ubuntu 64 https://sfdc.co/sfdx_cli_linux

Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.

Debian/Ubuntu x86 https://sfdc.co/sfdx_cli_linux_x86

Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.

 

  • Check whether the CLI is installed correctly by using the command sfdx plugins in the terminal/command prompt

LWC CLI
You may see something like salesforcedx 45.0.12 (pre-release). If you got the same version then cross your fingers. Don’t worry if your version is less than 45.0.12

  • Now run the commandsfdx plugins:install salesforcedx in the terminal/command prompt to install the CLI  i.e 45.0.12 or above.
  • Cross check your version after completing the above step by running the command sfdx plugins. Now you should see the salesforcedx 45.0.12 or above.

Note : To work with Lightning web components, you need minimum Api version 45 of the Salesforce CLI.

Visual studio code setup with the extensions :

  • 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.

LWC option 2

  • 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.

LWC -step 5

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

Creating SFDX Project -6

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

Creating SFDX Project step-7

  • 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

LWC Creating SFDX Project step-8

  • Enter the project name as HelloWorldLwc and press enter.

LWC Creating SFDX Project step-9

  • 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 :

LWC Creating SFDX Project step-10

  • You can create the project using the command in the terminal of the VS Code.
    sfdx force:project:create --projectname HelloWorldLwc

    LWC Creating SFDX Project step-11

  • 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

LWC Authorize your Developer Edition1

  • Select Project Default

LWC Authorize your Developer Edition2

  • Give the alias name(myWorldOrg) or leave blank

LWC Authorize your Developer Edition3

  • After the alias name you will be taken into the login screen where you have give your login credentials of salesforce org.

LWC Authorize your Developer Edition4

  • You can authorize the same by using the CLI with the following command in terminal
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.

LWC Authorize your Developer Edition5

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

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.

Creation of Lightning Web Component step18

  • 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.

Creation of Lightning Web Component step20

  • Now you have successfully created your first LIghtning Web Component helloExpression.
  • You can check your component under the lwc folder in VS Code editor

Creation of Lightning Web Component step21

  • 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.
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.

Creation of Lightning Web Component step 22

  • 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" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</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.

Deploying the component to Org step 23

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

Deploying the component to Org step 24

  • You can do the same deployment by using the terminal with the command mentioned below
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

Deploying the component to Org step 25

  • Now to open the Org to which we have deployed the component use the command
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

Finding the Lightning Web Component in the org step26

 

  • 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.

Finding the Lightning Web Component in the org step 27

 

  • 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

Finding the Lightning Web Component in the org step 29

  • 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

 

cheers…you have successfully created your first lightning web component. 🙂
Related Resources :
Other popular Post :

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box.

Happy Learning ?

About The contributor: 

Pradeep Kumar

2 Post Contribute
pradeep sfdcmonkey
Salesforce Enthusiast and Salesforce Evangelist.
Volunteer for Hyderabad Trailblazin’.
Teck Geek || Life Philosophy :
Six W’s –> Work Will Win When Wishing Won’t.
“Once you see the results, it becomes an Addiction”
Post By Pradeep:
  1. How to Create Lightning Web Component And Deploy To The Org
  2. Lightning DataTable With Row Action In Salesforce Lightning Web Component

10 comments

  • Can i post a lightning web component in an external web site ? or it is the same with lightning component that shows it throw an app an then an visualforce page and create a site? how can i embeded the lightning web component inside the visualforce o lightning app ?

    • Hi Deepak,

      As per your comment mentioned above, could you please share the link where you found the source code of different LWC components. It would be really helpful

      Regards
      Suparna

  • Hi Nice blog on Salesforce iot very Useful and easy read, we are one of the<a href=”https://cloudanalogy.com/”>Top Salesforce Development Company</a> and we aslo wrote about <a href=”https://cloudanalogy.com/blog/locker-services-and-lightning-components/”>Locker Services and Lightning Components</a> please go through a read we share in-depth Knowledge about lightining

  • If suppose, I have multiple LWC component in my VS code and I want to move only one component to sandbox org so please could you tell me the steps for the same as above step will move all the components.

  • Getting below error while Deploy Source to Org. Please suggest.

     

    INSUFFICIENT_ACCESS: use of the Metadata API requires a user with the ModifyAllData or ModifyMetadata permissions
    22:01:55.108 Starting SFDX: Deploy Source to Org
    INSUFFICIENT_ACCESS: use of the Metadata API requires a user with the ModifyAllData or ModifyMetadata permissions

Leave a Reply