Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org

Lightning Web Components are announced as part of Spring19 pre-release. Welcome in Lightning Web Components Worlds. In this post we will talk about what is Lightning web component (LWC), why lightning web component and how to very first lightning web component.

WHAT IS LIGHTNING WEB COMPONENT :-

Lightning Web Components is a new framework for building Lightning components. For Lightning Web Components development you need to setup SalesforceDX and VsCode as Lightning web components are currently not available in the Developer console. If you want to know more about the lightning web component please check our webinar recording of “Introduction to Lightning Web Components”. In ApexHours Session we covered all the below topic:-

  1. Why Lightning Web Component (LWC)
  2. Part 1 – Vanilla HTML5 Web Components
    • Benefits of Web Component
    • Pillars of Web Component
    • Demo of Custom Element and Templating
  3. Part 2 – Lightning Web Component
    • Hello World
    • Demo of Lifecycle methods
    • Call Apex Class
    • Access Custom Label
    • Lightning Data Services
    • Communication between Lightning Component and LWC

Here is the recording of the session:-

https://www.youtube.com/watch?v=KKNEpPP6V4s&t=40s

 

LET SEE HOW TO CREATE VERY FIRST LIGHTNING WEB COMPONENT.

 

Step 1) Setup SalesforceDX with VSCode.

  1. Download and Setup Salesforce CLI.
  2. Download and Install Salesforce VsCode.
  3. Install required Extension
    1. Salesforce Extension Pack
    2. Salesforce Lightning Web Components Salesforce Extension Pack

 

Step 2) Create SalesforceDx Project

1) Create Project:  
In our last post we talk about how to use SalesforceDx with non-scratch org. We will use same approch here. Press “CTRL+SHIFT+P” then select  “SFDX:Create Project with Manifest

Then enter project and select folder.

2) Authorize your org :
Press “CTRL+SHIFT+P” then select  “SFDX: Authorize an Org

 

Step 3) Finally Create your first Lightning Web Component

  • Press CTRL+SHIF+P then Type Web Component and then select “SFDX: Create Lightning Web Component
  • Then Select Folder where you want to save your LWC component
  • Then provide Component Name.
  • Verify your components under lwc folder.
LWC Folder

 

Step 4) Lets do some coding

Lets create one very simple lightning component with HelloWorld 🙂

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

HelloWorld.js

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

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

 

Step 5) Deploy your component in Org.

Once you are done with coding. Select LWC folder and right click on same then from menu select “SFDX: Deploy Source to Org“.

SFDX: Deploy Source to Org

 

Step 6) Verify your Changes with App Builder.

Open your app builder and add your Custom Component on page/App

app builder

Here is your first Lightning Web Component.

HelloWorld LWC components

NOTE:- Make sure Domain is enable in your Org. Else Custom Component will not visible in app builder.

I just record all this step in on Recording and posted same YouTube. Here is recording.

https://www.youtube.com/watch?v=V_riFQU5iNA

Write A Comment