Sunday, December 16, 2018

Introduction to Lightning Web Components(LWC)


This post explains the
1. What is Lighting Web Component(LWC)?
2. How to Create a Lightning Web Component with Non-scratch org.

What is Lighting Web Component(LWC)?
1. LWC is a new Programming Language modal for building a Lightning Components
2. LWC uses modern web programming standards, shadow DOM, modules and ECMAScript7.
3. LWC coexist and interoperate with the original Aura programming model, and delivers unparalleled performance.
How to Create a Lightning Web Component?
You cannot create LWC directly from your developer console. you need to SFDX to create your lightning web component.

Step 1: Steps to set up an SFDX with vs code

1. Download and Install Salesforce CLI
2. Download vs code From this link and install.
Note: Once install the Salesforce CLI You can verify using below command
sfdx --version

Installing Salesforce Extensions in vs code
1. Open vs code install Salesforce extension pack

2. Install Lightning Web Components Extension

Step 2: Signup to pre-release org

Sign up for a pre-release Developer Edition Org using below link
Note: Once you create the Pre-release developer org add my domain for the Org otherwise custom developed components are not visible in the app builder

Step 3: Upgrade Pre-Release version of Salesforce CLI

Use below command to upgrade the Pre-release version of Salesforce CLI
sfdx plugins:install salesforcedx@pre-release

Step 4: Creating the SalesforceDx Project

Go to your vs code editor
Press "CTRL + SHIFT + P" then select SFDX:Create Project with Manifest

Enter project Name and Select Folder

Step 5: Authorize an org

Press "CTRL + SHIFT + P" then select SFDX: Authorize an Org
this command opens your default browser then login to your pre-release developer org
once logged in to your org you may close your browser

Step 6: Creating Lightning Web Components

Press "CTRL + SHIFT + P" then select SFDX: Create Lightning Web Component
Then Select Folder where you want to save your LWC component
Then give your component name
verify component under lwc folder


Example

LWCDemoComponent.html
<template>
    <lightning-card title="Contact" icon-name="standard:contact">

        <lightning-record-form object-api-name={objectApiName} record-id={recordId} 
                               fields={fields}></lightning-record-form>

    </lightning-card>
</template>
LWCDemoComponent.js
import { LightningElement , api, track} from 'lwc';

export default class LWBDemoComponent extends LightningElement {
    @api recordId;
    @api objectApiName;
    @track fields = ['Name', 'Title', 'Phone', 'Email'];
}
LWCDemoComponent.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LWBDemoComponent">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
      <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

Step 7: Deploy your component in Org

once you complete the code, go to your lwc folder then right click on the component folder
select SFDX: Deploy Source to Org
go to contact record page editor you can verify your components
That's it

Resources
Trailhead Link

Let us know if you have any queries
Happy Learning!!!

2 comments:

  1. Thanks for the post. When I am trying to run the command "SFDX: Create Lightning Web Component", I am promted for a filename first , I provid the ""helloWorld" here, then it asks for the folder but no default forlder is available for selection. So Type in the one provided in trailhead(which alos matches my directory structure). But after pressing enter nothing happens, any idea what I might be doing wrong here?

    Thanks in advance.
    Regards,

    ReplyDelete
    Replies
    1. Hi Kapil
      when you run the command 'SFDX: Create Lightning Web Component', first it promotes for the folder name by default it is in lwc folder just press enter button no need to enter anything, again it will promotes for the lwc name then enter your lwc name. i hope it will help for you.
      Thanks

      Delete