How to Deploy Your First Lightning Web Component

While working through the Prepare for your Salesforce JavaScript Developer I Credential Trailmix, I realized that many modules had instructions for creating and deploying a Lightning Web Component. However, as a beginner, I found that the modules varied in the level of detail they provided, which could sometimes make it confusing to follow. That’s why I decided to create this blog post as a quick reference guide for anyone who is learning the basics of Lightning Web Components. This guide is intended to serve as a general overview of the basic workflow since deploying a Lightning Web Component in Salesforce is a relatively straightforward process. 

The basic steps are:

1. SFDX: Create Project
2. SFDX: Authorize an Org
3. SFDX: Create Lightning Web Component
4. SFDX: Deploy Source to Org
5. Add LWC to User Interface

Let’s walk through each one in more detail.

Step 1: Create a Project

 To create a new project in VS Code, follow these steps:

1. Open the command palette by typing cmd-shift-P.
2. In the command palette, type “SFDX: Create Project” and press Enter.
3. Press Enter again to accept the standard options.
4. Enter a name for your project (e.g. “HelloWorld”) in CamelCase with first letter capitalization and press Enter.
5. Select a local folder to store the project and press Enter.

Once you’ve completed these steps, VS Code will create and open the entire project directory. Review the provided folder structure and notice that all your LWCs created for a project will reside inside the folder “Force-app > main > default > lwc”.

Step 2: Authorize an Org

If you haven’t done so already, create a Trailhead Playground hands-on org and retrieve your username. After that, request a password reset. If you are already in a playground, you can locate your username and the “Reset My Password” link in the Playground Starter app within the “Get Your Login Credentials” tab.

After retrieving your login credentials, return to VS Code, open the command palette again and type SFDX: Authorize an Org

1. Select Production: login.salesforce.com and press Enter.
2. Enter an alias for the org using snake case, e.g. “my_first_lwc_org”. This will help you easily identify the org later on.
   • Press Enter.

VS Code will now open the Salesforce login screen in your web browser. Enter your Username and Password to log in. If you have successfully logged in to your Trailhead Playground, leave it open and return to Visual Studio Code.

Step 3: Create a Lightning Web Component

To create a new Lightning Web Component in Salesforce, follow these steps: 

1. Open the command palette.
2. Type “SFDX: Create Lightning Web Component” and hit enter.
3. Enter a name for your LWC, such as “helloWorld” (Note: the naming convention for LWC’s is also camelCase but capitalization typically starts with the second word e.g. “helloWorld” ).
4. Press enter to accept the default file path: force-app/main/default/lwc.
5. Press enter again to create the component. 

After completing these steps, VS Code will create a new LWC folder within force-app > main > default > lwc. Within this folder, you’ll find three files: helloWorld.html, helloWorld.js, and helloWorld.xml.

The steps to design, create and test a LWC are outside the scope of this blog post. However, if you’re new to LWCs, you can start with this Trailhead: Create Lightning Web Components. For our purposes, we can grab a pre-built, ready to use LWC from the Salesforce Component Library. 

For this example, let’s create a simple Card component. Open the helloWorld.html and replace the contents with the following:

<template>
        <lightning-card  title="Hello World">
            <p class="slds-p-horizontal_small">This is my first Lightning Web Component!</p>
        </lightning-card>
</template>

If you had any custom functionality, such as a button trigger, you would add that function to the helloWorld.js file and import it here. But for this example, you can leave the helloWorld.js file as it is. 

To make the LWC visible on the lightning page layout, you need to modify the helloWorld.xml settings. Set the isExposed flag to ‘true’ and specify the target record, page or app where you want it available. For this quick start example, you can simply copy the given text and replace the existing content in the helloWorld.xml.

<?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__AppPage</target>
        <target>lightning__RecordPage</target> 
        <target>lightning__HomePage</target> 
    </targets>
</LightningComponentBundle>

With those settings correct, we are ready to deploy our work to a page layout.

Step 4: SFDX: Deploy Source to Org

To deploy your project to your org, open your command palette and type “SFDX: Deploy Source to Org”. If there are no errors, your project will be successfully deployed. If you only need to deploy a specific part of your project, you can right-click on the LWC folder and select “Deploy Source to Org” to deploy only that specific folder.

Step 5: Add LWC to User Interface

Navigate back to your org in your browser. If you’ve closed the org, you can use SFDX: Open Default Org to launch it. Open Setup and search for and launch “Lightning App Builder”. Create a lightning page:

1. Click New.
2. Choose the App Page and click Next.
3. Name your app page “Hello World”, and then click Next.
4. For layout, choose Header and Left Sidebar.
5. Click Finish.

From the left menu, search for and find your helloWorld component and drag it onto the page builder (It will be within the sub-menu “Custom.” 

To create a new lightning page named “Hello World”, follow these steps: 

1. Navigate back to your org in your browser. If you’ve closed the org, launch it using SFDX: Open Default Org.
2. Open Setup and search for “Lightning App Builder” and launch it.
3. Click “New”.
4. Choose “App Page” and click “Next”.
5. Name your app page “Hello World” and click “Next”.
6. For layout, select “Header and Left Sidebar”.
7. Click “Finish”.
8. From the left component menu, search for your “helloWorld” component (It will be found within the “Custom” sub-menu) and drag it onto the page builder.

Save and activate your page.

Conclusion

Open the new page by opening the App Launcher menu and searching for “Hello.” Find the app “Hello World” and launch it. Congrats! You have successfully deployed a Lightning Web Component.

By following this simple process, you can start building and deploying Lightning Web Components. As you gain more experience, you can move on to more complex tasks such as querying and manipulating data.