Start tracking your progress
Trailhead Home
Trailhead Home

Deploy Lightning Web Component Files

Learning Objectives

After completing this unit, you’ll be able to:
  • Configure Lightning web component files for display in an org.
  • Deploy your files to an org.
  • Verify component behavior in an org environment.

Step up to an Org

It’s time to leave the Playground for a bit, although you’ll find it a very useful place to visit. In this unit, we develop a Lightning web component using VS Code with the Salesforce extension. We deploy the files to an org and build an app to use your component.

What You Need

As stated in the first unit, you need some familiarity with Salesforce DX to continue. To complete this unit, you need:

  • Visual Studio Code with the Salesforce Extension Pack
  • Salesforce CLI
  • Dev Hub enabled org
  • My Domain deployed to users in your Dev Hub enabled org

    (Playground orgs created within Trailhead have My Domain deployed for you. If you associated a Developer Edition org with your Trailhead account, enable and deploy My Domain.)

To meet the rest of these requirements, complete the Quick Start: Lightning Web Components project. Enable Dev Hub and deploy My Domain from the Setup menu in your org, if they’re not already configured.

Set Up Lightning Web Component Files for Use in an Org

You’re going to take the example from the previous unit, name it the bikeCard component and push it to your org.

Note

Note

We’re not defining any styling of our own, so we don’t need a CSS file.

The files you need to push a component to an org:

bikeCard.html

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

bikeCard.js

import { LightningElement } from 'lwc';
export default class BikeCard extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
 }

bikeCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
  1. Create a project by selecting SFDX: Create Project from the Command Palette in VS Code. Accept the standard template and give it the project name bikeCard.
  2. Create a bikeCard component folder and files by right-clicking on the lwc folder and select SFDX: Create Lightning Web Component.

    Create bikeCard component files.

  3. Save the contents the files under bikeCard\force-app\main\default\lwc so you see the following in VS Code: bikeCard component file structure.

    Lightning web components follow web standards. The HTML standard recommends that custom element names contain a hyphen. However, the Salesforce platform doesn’t allow hyphens in the component folder or file names. So we use camelCase naming conventions here.

  4. Copy the contents from above for the bikeCard.html, bikeCard.js, and bikeCard.js-meta.xml files
  5. Save your files.

The Component Configuration File

The file we haven’t covered yet is the component configuration file with the extension .js-meta.xml. This file provides metadata for Salesforce, including the design configuration for components intended for use in Lightning App Builder.

The files that make up a component, including the configuration file.

We haven’t covered configuration files yet, because we’ve been playing in the playground. Now that you’re going to start using the content within an org, you must include a configuration file.

Notice that the ebikes repo components all have this configuration file. Here’s an example from the ebikes repo:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Product Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Product__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
Required
apiVersion binds the component to a Salesforce API version.

isExposed (true or false) makes the component available from other namespaces. Only set this to true to make a component usable in a managed package or by Lightning App Builder in another org.

Optional
targets specify which types of Lightning pages the component can be added to in the Lightning App Builder.

targetConfigs let you specify behavior specific to each type of Lightning page, including things like which objects support the component.

See the documentation for the full list of supported syntax.

Displaying a Component in an Org

You have two options for displaying a Lightning web component in the UI.

  1. Set the component to support various flexipage types (home, record home, and so on) then add it to a flexipage using the Lightning App Builder. This is the simplest approach and the one you follow in this unit.
  2. You can also create a tab which points to an Aura component containing your Lightning web component. The Lightning Web Components Recipes repo uses this approach. You can see the required pieces in the repo.

Deploy Your Files

Now, you need to deploy the component files to your Dev Hub enabled org.

  1. Authenticate with your Dev Hub org using SFDX: Authorize an Org from the Command Palette in VS Code.

    When prompted, accept the Project Default and press Enter to accept the default alias.

    If prompted to allow access, click Allow.

  2. Deploy the project files using SFDX: Deploy this Source to Org from the Command Palette in VS Code.

Create a New Page for Your Component

Since we set up our component configuration file to enable the use of the component in Lightning App Builder, use the UI to create an app and add your component to it.

  1. To open your org, use SFDX: Open Default Org from the Command Palette in VS Code.
  2. In Setup, enter Lightning App Builder in the Quick Find box and then select Lightning App Builder.
  3. Click New.
  4. Select App Page and Click Next.
  5. Give it the label Bike Card and Click Next.
  6. Select One Region and click Finish.
  7. In Lightning App Builder, scroll down the Lightning components list on the left side until you see your bikeCard component. The bikeCard component option in Lightning App Builder Custom component menu.

Now you can drag it onto the page. Save the page, Activate it, and bikeCard component shows up on the assigned page.

  1. Drag your bikeCard component to the top of the page layout until you see that the bike appears.
  2. Click Save.
  3. Click Activate.
  4. Keep Activate for all users selected. And, optionally, change the name or icon for your app.
  5. Click Save.

    You’re asked to add your page to navigation menus, but you don’t need to You can still get to your page in this environment.

  6. Click Finish.
  7. Click Back in the upper right corner to exit the Lightning App Builder.
  8. From the App Launcher (App Launcher.), find and select Bike Card.
  9. Open it and see your component working in the UI. Your Bike Card app in Lightning Experience.

There you go, a shiny new bike. You’ve pushed a component to an org, seen it on the page, and can verify it in the UI.

In the next unit, you build an interactive component with event handling and deploy it to your org for testing.