Use Salesforce Mobile Developer Tools

You set up your developer tools, so let's go over how to use them. For simplicity, we use the iOS simulator, but using the Android emulator is the same.

Before you begin, make sure that you have enabled the dev hub in your org and authorized your org local development. If you need help setting up your org for local development, you can use this guide for help.

Use the Simulator with Visual Studio Code

As you develop your Lightning web component, you can quickly open it in a mobile simulator right from Visual Studio Code.

  1. Launch Visual Studio Code.
  2. Click File | Open and open the project you created in the Quick Start: Lightning Web Components badge.
    Note: If you don’t have a project created, you can create a new one by selecting SFDX: Create a Project in the Visual Studio Code Command Palette and following the prompts.
  3. Click View | Terminal to open VS Code's integrated terminal if it's not already visible.
  4. Run the command sfdx plugins:install @salesforce/lwc-dev-mobile to install the Salesforce Mobile Extensions Plug-in. If you already have this plug-in installed, there’s no need to reinstall it.
  5. If you haven’t already done so, download the bikeCard component.
  6. Unzip the file.
  7. Drag the unzipped folder into the force-app/main/default/lwc folder of your project in Visual Studio Code.
  8. In the Visual Studio Code explorer, right-click the bikeCard folder and select SFDX: Preview Component Locally.
  9. Select Use iOS Simulator from the menu that pops up.
  10. Select a device from the list of available simulators.

The Simulator opens in a separate window and displays a preview of your Lightning web component.

Example LWC on mobile.

Now let’s change something in the component to see if the simulator can keep up with your development. Price is usually a significant factor in purchasing a bike, so let’s make that information stand out by making it green and bold.

  1. In the CSS file, bikeCard.css, copy and paste the following code.
    .price {
        color: green;
        font-weight: bold;
    }
  2. Save the file.
  3. In the HTML file, bikeCard.html, add class="price" to the div containing the price.
    <template>
        <div>
            <div>Name: {name}</div>
            <div>Description: {description}</div>
            <lightning-badge label={material}></lightning-badge>
            <lightning-badge label={category}></lightning-badge>
            <div class="price">Price: {price}</div>
            <div><img src={pictureUrl}/></div>
        </div>
    </template>
  4. Save the file.

Notice that the price is now green and bold in the Simulator. You don’t even have to refresh the page—Salesforce automatically updates everything for you!

Example LWC on mobile with added change.

Use the Simulator with Desktop Lightning App Builder

You made updates to the price styling using Visual Studio Code that you can see in the Simulator, but will you also see the changes in Lightning App Builder? The answer is yes! You only need to deploy your changes to your org and they’ll be there!

  1. In Visual Studio Code, right-click the force-app/main/default/lwc/bikeCard Lightning component folder in the explorer and select SFDX: Deploy Source to Org.
  2. In your org, from Setup, enter App Builder in the Quick Find box and select Lightning App Builder.
  3. Click Edit next to the Bike App.

The bike card component now includes the updated price styling.

Example LWC on desktop with added change.

If you want to preview the component, use the SFDX: Preview Component Locally option in Visual Studio Code. When you use this option, the page opens a temporary browser page using localhost. To see the component in the Salesforce app, open the Salesforce app on the simulator. Then go to your Lightning App to see how it looks.

Example LWC on mobile using the Salesforce app build.

When viewed on mobile, the list of available bikes makes the page a bit too long. Let’s create a filter to reduce the number of available bikes displayed on a desktop. 

  1. From Lightning App Builder, click the selector component (available bikes list component) in the preview window.
  2. Click + Add Filter.
  3. Under Field, Click Select.
  4. Select Device, then Form Factor, then click Done.
  5. Click Done.
  6. Click Save.
  7. From your iOS simulator window, go to the Salesforce app and then to the Lightning App you edited. Pull down on the page to refresh it.

The list is now gone from the mobile view but can still be used on desktop.

LWC on mobile using the Salesforce app build without the available bike list.

You can now test your Lightning web components on a simulator straight from your desktop, which is good news for both you and your users. Next, you learn how to debug your components on mobile using browser tools. 

We won’t check any of your setup. Click Verify Step to go to the next step in the project.

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