Hello LWC!

Lightning Web Component (LWC)

• Lightning Component can be created by Aura Component and LWC

• LWC is the latest way to write coding.

• Lightning Web Components use core web standards.

• As it’s built on code that runs natively in browsers, LWC is lightweight & delivers exceptional performance.  

The benefit of lightning components

• LWC is fast

• It is light-weight.

• Better security

• Better browser compatibility 

The file involved in LWC

• It consists of four files

• HTML

• CSS

• JavaScript

• Configuration

Configure set up for lightning 

Before starting to build the LWC, you must know that LWC cannot be directly created in CRM as an Aura component, you need Salesforce DX to build and deploy LWD to Salesforce. In order to configure Salesforce DX perform the below steps:

1. Install the Command Line Interface (CLI)

1. Use https://sfdc.co/sfdx_cli_osx  link for Mac

2. Use https://sfdc.co/sfdx_cli_win for MS windows

2. Verify the installation

1. Once you complete installation, you can quickly verify from the Mac terminal or Command Prompt with sfdx command, if everything is fine, you will get the message below.

3. Install VS code-

Download and install the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, there’s no need to reinstall it.

4.  Install Salesforce Extensions for Visual Studio Code

5. Create a new Project- 

Now you are good to create your 1st lightning Project in Salesforce in your local machine. In Visual Studio Code, open the Command Palette by pressing 

• Ctrl+Shift+P (Windows) or 

• Cmd+Shift+P (macOS)

6. Authorize Your Salesforce org- 

So far, you have completed all steps in your local machine. In the above screenshot, you can see No Default Org set, it means no salesforce is connected with your local project. You need your local project to connect with salesforce so that you can retrieve or deploy your LWC to salesforce org. IIn Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and type SFDX: Once you run this, you will be asked to authorize the salesforce org, once you authorized, you will be able to see your org in button with alias name as below.

 Lightning Web Component (LWC)

                              

Now we are good to start our 1st LWC app. 

Create Lightning web component

Once you complete all the above steps to configure SFDX, we are good to go with our 1st application HelloLWC. Let’s follow the below steps:

1. Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and SFDX: Create Lightning Web Component.

2. Enter HelloLWC for the name of the new component.

3. Press Enter to accept the default force-app/main/default/lwc, you will see below three file in LWC directory

1. helloLWC.html

2. hellowLWC.js

3. hellLWC.js-meta.xml

4. In the HTML file, helloLWC.html, copy and paste the following code and save the file:

<template>

   <lightning-card title="Hello LWC" 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>

5. In the JavaScript file, helloLWC.js, copy and paste the following code

import { LightningElement } from 'lwc';

 

export default class HelloLWC extends LightningElement {

   greeting = 'LWC'; 

   changeHandler(){

       this.greeting = event.target.value;

   }

}

6. In the XML file helloWorld.js-meta.xml, copy and paste the following code

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

   <apiVersion>49.0</apiVersion>

   <isExposed>true</isExposed>

   <targets>

       <target>lightning__AppPage</target>

       <target>lightning__RecordPage</target>

       <target>lightning__HomePage</target>

     </targets>

</LightningComponentBundle>

Note- Each Lightning web component folder must include a configuration file named <component>.js-meta.xml. This file defines where the LWC component can be placed. To get more details please Click here

Deploy LWC from local to Salesforce

• Once you created the HelloLWC component in a local machine, you can deploy this to an authorized Salesforce org. 

• Right-click on LWC component helloLWC, select deploy source to org

For a more complex scenario, how LWC works with salesforce data,

please check out my next blog.

You can also refer below links for LWC more details.

Work with a template in LWC, click here.

Navigation in LWC, click here.