Easy Steps to Create a Lightning Web Component Using VS Code

Follow these simple steps to create a Lightning Web Component (LWC) using Visual Studio Code.

Step 1: Right-click on the LWC Folder

Locate the LWC folder in your project structure and right-click on it to begin creating a new component.

Step 2: Enter Your Desired Lightning Web Component Name

Provide a meaningful name for your Lightning Web Component.

Step 3: Accept Default LWC Path

Enter the LWC name and accept the default path: force-app/main/default/lwc.

Step 4: Update Your Component HTML Code

Replace the content of your component's HTML file with the following code:

<template>
    <lightning-card>
        <lightning-input
            type="number"
            label="Number of Employees"
            value={numberOfEmployees}
            onchange={handleChange}>
        </lightning-input>
        <lightning-button
            label="Reset"
            onclick={reset}>
        </lightning-button>
        <template if:true={accounts.data}>
            <template for:each={accounts.data} for:item="account">
                 <p key={account.Id}>{account.Name}</p>
            </template>
        </template> 
    </lightning-card>
</template>

Step 5: Update Your Component JavaScript Code

Modify the content of your component's JavaScript file with the following code:

import { LightningElement, wire } from 'lwc';
import queryAccountsByEmployeeNumber from '@salesforce/apex/AccountControllerLwc.queryAccountsByEmployeeNumber';

export default class AccountSearch extends LightningElement {
    numberOfEmployees = null;

    handleChange(event) {
        this.numberOfEmployees = event.detail.value;
    }

    reset() {
        this.numberOfEmployees = null;
    }

    @wire(queryAccountsByEmployeeNumber, { numberOfEmployees: '$numberOfEmployees' })
    accounts;
}

Step 6: Update Your Meta.xml Code

Replace the content of your meta.xml file with the following code:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Step 7: Create an Apex Class Using VS Code

Quickly create an Apex class by navigating to the appropriate directory in your project.

Step 8: Update the Apex Class

Open the Apex class and update it with the following code:

public with sharing class AccountControllerLwc {
    @AuraEnabled(cacheable=true)
    public static List<Account> queryAccountsByEmployeeNumber(Integer numberOfEmployees) {
        return [
            SELECT Name
            FROM Account
            WHERE NumberOfEmployees = :numberOfEmployees
        ];
   }
}

Step 9: Deploy the Apex Class to the Server

Use Visual Studio Code to deploy your Apex class to the Salesforce server.

Step 10: Deploy All LWC Items to the Server

Deploy all your Lightning Web Component items to the Salesforce server using VS Code.

---

Your component is now ready! You can call it on the account detail page.

Thank you for following along!