Create Your First LWC

let’s create a simple “Hello World” Lightning Web Component (LWC).

1. Create a New LWC Project:

Open your terminal and run the following commands:

sfdx force:project:create -n mylwcproject
cd mylwcproject

2. Enable LWC:

If LWC is not enabled in your Salesforce org, enable it by running:

sfdx force:org:create -f config/project-scratch-def.json -a myorg -s -d 30
sfdx force:source:push -u myorg

3. Create Your First Lightning Web Component:

Run the following command to create a new LWC named helloWorld:

sfdx force:lightning:component:create --type lwc -n helloWorld

4. Navigate to the Component Directory:

cd force-app/main/default/lwc/helloWorld

5. Open the Component Files in Your Editor:

code .

This will open VS Code with the files for your component.

6. Write Your Component Code:

HTML (helloWorld.html):

<template>
    <h1>Hello World!</h1>
</template>

JavaScript (helloWorld.js):

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {}

7. Preview Your Component:

Push your changes to your org:

sfdx force:source:push -u myorg

Then open your org:

sfdx force:org:open -u myorg

Navigate to a Lightning App Builder and drag your component onto a page to preview it.

That’s it! You’ve created your first LWC. It’s a simple one, but it demonstrates the basic structure of an LWC component. You can continue to build on this foundation by adding more functionality, such as event handling, data binding, and integrating with Apex.