Hello World ! LWC

Follow this trialhead module –

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

2. Install CLI (Command Line Interface). Download from this link –

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

2. To check CLI install proper, go to VS Code terminal > write sfdx enter

You can get the output –

Usage: sfdx COMMAND [command-specific-options]
Help topics, type “sfdx help TOPIC” for more details:
sfdx force # tools for the salesforce developer
sfdx plugins # manage plugins
sfdx update # update sfdx-cli

Create a Salesforce DX Project
  1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
  2. Type SFDX.
  3. Select SFDX: Create Project.
  4. Enter HelloWorldLightningWebComponent as the project name.
  5. Press Enter.
  6. Select a folder to store the project.
  7. Click Create Project. You should see something like this as your base setup.
Create a Lightning Web Component
  1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
  2. Type SFDX.
  3. Select SFDX: Create Lightning Web Component.
  4. Press Enter to accept the default force-app/main/default/lwc.
  5. Enter helloWorld for the name of the new component.
  6. Press Enter.
  7. View the newly created files in Visual Studio Code.
  8. In the HTML file, helloWorld.html, copy and paste the following code.
<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>

9. In the JavaScript file, helloWorld.js, copy and paste the following code.

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

10. 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" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

11. Deploy the code to your org.

With the default folder right-clicked, SFDX: Deploy Source to Org is selected in the options list.

12. Now the new LWC will be available in org. Edit the home page

Capture (2)

If you are deploying will get error –

Error: read ECONNRESET
Run below commands in terminals of VS Code –
set https-proxy https://username:brosalesforce@gmail.com:8080
set proxy https://username:brosalesforce@gmail.com:8080
set sslVerify false
set strict-ssl false

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s