Salesforce Lightning Web Components Basic Project

Project Structure

A basic Salesforce Lightning Web Components (LWC) project typically follows a specific structure:

• lwc-project/
  • force-app/
    • main/
      • default/
        • aura/
        • lwc/
          • helloWorld/
            • helloWorld.html
            • helloWorld.js
            • helloWorld.js-meta.xml
            • helloWorld.css
        • classes/
• sfdx-project.json
• README.md

HelloWorld Component Files

helloWorld.html

The HTML file for the helloWorld Lightning Web Component:

<template>
    <lightning-card title="Hello World">
        <p class="slds-p-around_medium">Hello, {greeting}!</p>
        <lightning-input label="Enter your name" onchange={handleChange}></lightning-input>
    </lightning-card>
</template>

helloWorld.js

The JavaScript file for the helloWorld Lightning Web Component:

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    greeting = 'World';

    handleChange(event) {
        this.greeting = event.target.value;
    }
}

helloWorld.js-meta.xml

The XML metadata file for the helloWorld Lightning Web Component:

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