Set Up Your Development Environment

Before you can create your first Lightning web component (LWC), or test a LWC in a mobile app, you must set up your development environment for mobile components.

The complete development environment for building Lightning web components for offline-enabled apps includes the following elements.

Salesforce CLI (SFDX)
Visual Studio Code (VS Code)
Salesforce Extensions for VS Code
Android Studio and a virtual device emulator
Apple Xcode and a virtual device simulator
Salesforce Mobile Extensions
A virtual device build for the relevant mobile app

While you can eventually choose to replace or add tools to this list, start with these and add to them as you become more experienced.

Don’t let Android Studio or Xcode intimidate you. You only need to use it to provision a device emulator (Android) or simulator (iOS). You don’t need both Android Studio and Xcode. If you want both, great. If not, pick the one you’re most comfortable with.

Note

Installation Instructions

We recommend the following installation sequence. Each link provides complete details for installing and configuring each of the different tools.

Install and configure Android Studio
Install and configure Xcode
Install the Salesforce CLI
Install the Mobile Extensions
Install VS Code
Install Salesforce Extensions for VS Code
Download the latest virtual device build for the mobile app
- For the Salesforce mobile app, use the standard virtual device builds, as described in Preview Components in the Salesforce Mobile App.
  
  Your org must be enabled for LWC Offline before you can see or use LWC Offline features.
  Note
- For the Field Service mobile app, the download link is posted in the Trailblazer Community.
Install a virtual device build into a configured Android emulator or iOS simulator instance

The Develop a Lightning Web Component Quick Action quick start provides hands-on instructions for setting up your development environment, and also for creating, deploying, and running your first LWC.

Install Mobile Extensions

To use Mobile Extensions, install the lwc-dev-mobile Salesforce CLI plug-in. After it’s installed, use it to check for the required Android and iOS configurations. If the plug-in finds problems, the command output gives you hints for how to fix your environment. After your environment is set up, preview your components from the command line or from Visual Studio Code.
Set Up Xcode

Before you run previews in iOS simulators, make sure that the latest version of Xcode is properly installed and configured. After you install Xcode, test your environment with the Mobile Preview setup command. If you’re using an existing Xcode installation, run the setup command to verify that your installed environment meets Mobile Extensions requirements.
Set Up Android Studio

Before you run previews in Android emulators, make sure that Android Studio is properly installed and configured. After you install Android Studio, test your environment with the setup command. If you’re using an existing Android Studio installation, run setup to verify that your installed environment meets Mobile Extensions requirements.