Deploy Lightning Web Component Files - Full Code with Output

Lightning Web Components (LWC) provide a modern, lightweight standard for building performant custom interfaces in Salesforce. In this guide, we will step through creating, configuring, and deploying a foundational LWC component from your local environment directly into a Salesforce org using modern Salesforce CLI commands.

In plain words: Deploying an LWC means pushing your local HTML, JavaScript, and XML configuration files to your Salesforce org so users can access your custom UI component on App Pages or Record Pages.

Prerequisites

Before creating and deploying your component, ensure you have the following requirements ready:

• Salesforce Developer Org or Scratch Org: An active Salesforce environment connected via CLI.
• Salesforce CLI installed: Modern sf CLI executable configured on your machine.
• VS Code with Salesforce Extension Pack: Ideal editor setup for Salesforce DX projects.
• Foundational Web Knowledge: Basic understanding of HTML, JavaScript ES6, and modern CSS.

Step 1: Create the LWC Project Component

Open your local project terminal and generate a new Lightning Web Component named helloWorld:

sf project generate component -n helloWorld -d force-app/main/default/lwc --type lwc

Step 2: Develop the Component Source Files

Every standard LWC requires a JavaScript file, an HTML template, and an XML configuration file.

1. JavaScript Controller (helloWorld.js)

Define a reactive property inside the component's JavaScript class:

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    greeting = 'Hello, Lightning Web Components!';
}

2. HTML Template (helloWorld.html)

Bind the greeting property inside a Salesforce Lightning Card component for clean styling:

<template>
    <lightning-card title="Hello World Component" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p class="slds-text-heading_small">{greeting}</p>
        </div>
    </lightning-card>
</template>

3. Component Metadata Configuration (helloWorld.js-meta.xml)

To display your component in Lightning App Builder, configure isExposed to true and define target locations:

<?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>

Common Developer Mistake: Leaving <isExposed>false</isExposed> or omitting targets in the XML configuration file will prevent your component from showing up in Lightning App Builder menus, even if deployment succeeds.

Step 3: Deploy to Your Salesforce Org

Deploy your component to your default authorized org using the current Salesforce CLI command syntax:

sf project deploy start --source-dir force-app/main/default/lwc/helloWorld

Always test CLI deployments in a Sandbox or Scratch Org before pushing source files to production orgs.

Step 4: Verify Component in Lightning App Builder

• Log into your target Salesforce Org.
• Navigate to Setup > User Interface > Lightning App Builder.
• Edit an existing page or click New to create a new Lightning App Page.
• Scroll down to the Custom components section on the left sidebar.
• Drag the helloWorld component onto your page layout, then click Save and Activate.

Expected Output: You will see a Lightning card containing your reactive header reading: "Hello, Lightning Web Components!" rendered seamlessly inside the Salesforce UI.

Conclusion

Deploying Lightning Web Components using modern Salesforce CLI tooling streamlines the development lifecycle. By combining HTML templates, JavaScript controllers, and metadata configurations, you can build modular, enterprise-grade components across your Salesforce org.