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 component are currently not available in Developer console. If you want to know more about lightning web component please check our webinar recording of "Introduction to Lightning Web Components". In ApexHours Session we covered all 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 recording of session:-

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

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.

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

Step 6) Verify your Changes with App Builder.

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

Here is your first Lightning Web Component.

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.

We also did one session on LWC best Practice with "René Winkelmeyer". Please check this recording to learn more about Lwc.

Please check below post on Lightning Web Components:-

1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC
3. Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs
4. How to get current user id in lightning web component | Access logged in user ID in LWC 
5. Toast Notification in Lightning Web Components | ShowToastEvent |  (LWC)  
6. Lightning Web Components Best practices 
7. Events in Lightning web components (LWC) | Communicate with Events
8. Lightning datatable In Lightning Web Components | lightning datatable inline edit
9. Lightning Message Service (LMS) | MessageChannel
    
   

Further Reading:

1.  https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components

Check our YouTube Channel for more recording in Lightning Web Components.

Thanks,
Amit Chaudhary
amit.salesforce21@gmail.com

  @amit_sfdc    @ApexHours
  Salesforce Apex Hours 
    #SalesforceApexHours