The Reimagined Trailblazer Community is Here! Learn More.

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

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 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 create the bike component discussed in the Create Lightning Component unit 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
  • bikeCard.js
  • bikeCard.js-meta.xml
  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 ComponentCreate bikeCard component files.
  3. Enter the filename bikeCard.
  4. Save the contents of 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.
  5. Copy the contents for the bikeCard.html, bikeCard.js, and bikeCard.js-meta.xml files.

    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>
  6. 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 WebComponents.dev. 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 Lightning component usable in these specific cases:

  • From a managed package in Aura
  • From 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. 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 left 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.

Resources

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities