How to Create Lightning Web Component And Deploy To The Salesforce Org
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
-
Salesforce Org setup
-
Salesforce CLI
-
Visual studio code setup with the extensions
Salesforce Org setup
- Login into your existing salesforce org or sign up for the new org using :
https://developer.salesforce.com/
- 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
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.
- 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.
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
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
sfdx force:org:list
–all : it will give all the orgs that are active and inactive
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.
- 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.
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" 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.
- 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
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
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
- 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.
cheers…you have successfully created your first lightning web component. 🙂
Related Resources :
Other popular Post :
- Create Modal/Popup Box In Lightning Component – Salesforce
- Display Current Login User Profile Picture In Lightning Component
- Download Data as CSV File With JavaScript In Salesforce Lightning Component
- Custom Dependent Picklist Field With lightning:select In Lightning Component
- Formula Fields to Display Images From Content Documents – Salesforce Lightning/Classic
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:
Teck Geek || Life Philosophy :
Six W’s –> Work Will Win When Wishing Won’t.
“Once you see the results, it becomes an Addiction”
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 ?
as per documentation lwc is not supported in lightning out and lightning component for visualforce
Hi I find the source code of lightning web component in salesforce
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
Great post