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
- In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
. - Select SFDX: Create Project.
- Enter
HelloWorldLightningWebComponent
as the project name. - Press Enter.
- Select a folder to store the project.
- Click Create Project. You should see something like this as your base setup.
- In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
. - Select SFDX: Create Lightning Web Component.
- Press Enter to accept the default
force-app/main/default/lwc
. - Enter
helloWorld
for the name of the new component. - Press Enter.
- View the newly created files in Visual Studio Code.
- 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.
12. Now the new LWC will be available in org. Edit the home page
If you are deploying will get error –
set proxy https://username:brosalesforce@gmail.com:8080
set sslVerify false
set strict-ssl false