Preview Your Component Using Local Dev

Earlier in this project, you created a scratch org (alias scratchOrg), a Lightning app, and a Lightning web component (myFirstWebComponent). Now, you’ll run Local Dev to view your component in a real-time preview of your Lightning app.

Run Local Dev for a Lightning App in a Desktop Environment

With Local Dev, you can run a real-time preview of your Lightning app in a desktop or Salesforce mobile app (iOS or Android) environment. The preview is automatically updated when your local components change, so you don’t have to deploy code or refresh your browser page. There are different command flags for running a desktop preview versus a mobile preview.

Let’s preview the Sales Lightning app in a desktop environment using Local Dev. Your scratch org comes with a few default apps that you can use.

1. In Visual Studio Code, click Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux, then type new terminal and select Terminal: Create New Terminal.
   
2. Make sure you have the latest version of the Local Dev command. In the Terminal tab, enter sf update and press Enter.
   
3. When the update is complete, in the same Terminal tab, enter sf lightning dev app --target-org scratchOrg --device-type desktop and press Enter.
   
4. When you’re prompted to select a Lightning Experience app to preview, use the arrow keys to select Sales and then press Enter.
   

If the command runs successfully, it opens a new tab in your browser with a preview of your org’s Seller Home page. Local Dev is enabled for this scratch org. These are the parameters that you used in the command.

• --target-org defines which target org that you want to preview. You set this flag to scratchOrg.
  
• --device-type defines the environment that your preview runs in. Setting this flag to desktop ensured that your preview ran in a desktop environment.
  

To learn about other optional flags for the sf lightning dev app command, see Lightning Web Components Developer Guide: Preview a Lightning App (Generally Available).

Now let’s edit your component and see how your Local Dev preview updates itself in real-time.

1. In your browser, click the Accounts tab and open the Component Developers record.
   
2. In Visual Studio Code, open myFirstWebComponent.html.
   
3. In the <lightning-card> element, change the value of title from “ContactInformation” to “Contact Information”. Here’s what the updated line of code should look like:
   <lightning-card title="Contact Information" icon-name="custom:custom14">
4. Press Command + S on macOS, or Ctrl + S on Windows or Linux, to save the file.
   

Take a look in your browser at your app preview, and notice how the title of your component automatically updates itself based on your local change. You didn’t have to redeploy your app or manually refresh the page to see your revision.

Run Local Dev for a Lightning App in an iOS Environment (macOS only)

With Local Dev, you can view your project in an iOS simulator or an Android emulator. Let’s take a look at how to run a preview of the same Lightning app in an iOS environment.

In this section, we go over the iOS simulator only, but you follow the same process to use the Android emulator. To learn about using Local Dev with Android Studio, see Android Emulators.

Mac users can run an iOS simulator for Local Dev using Xcode. If you don’t already have Xcode installed, install it from the Mac App Store and complete the initial setup process. Make sure to download iOS simulators for mobile devices.

When you finish installing Xcode, open Visual Studio Code. It’s time to run your Lightning app in an iPhone simulator.

1. In Visual Studio Code, click Command + Shift + P, then type new terminal and select Terminal: Create New Terminal.
   
2. In your new terminal window, run sf lightning dev app --target-org scratchOrg --device-type ios.
   
3. When you’re prompted to select a Lightning Experience app to preview, select Sales and press Enter.
   
4. When you’re prompted to select a device to use for the preview, select an iPhone from the list of valid options.
   
5. When you’re prompted to download and install the Salesforce Mobile App, enter y and then press Enter.
   

Here’s what your terminal output might look like when the Local Dev command runs successfully.

sf lightning dev app --target-org scratchOrg --device-type ios
? Which Lightning Experience App do you want to use for the preview? Sales
✔ Requirements (0.444 sec)
  ✔ PASSED: Checking macOS Environment (0.000 sec)
  ✔ PASSED: Checking Xcode (0.029 sec)
    › Xcode installed: Xcode 16.2 Build version 16C5032a
  ✔ PASSED: Checking Supported Simulator Runtime (0.414 sec)
    › One or more supported simulator runtimes are configured for iOS: iOS 17.0 iOS 18.2
? Which device do you want to use for the preview? iPhone 15 Pro, iOS 17
Booting device iPhone 15 Pro, iOS 17.0.0, DCF7AD98-FAC7-4267-A546-14A80F874209... done
Installing self-signed certificate... done
? Salesforce Mobile App isn’t installed on your device. Do you want to download and install it? yes
Preparing to download... done
Installing app com.salesforce.chatter... done
terminating app com.salesforce.chatter... done

The Salesforce app should open automatically in your iPhone simulator. Accept the app’s Terms of Use. Then, the simulator should display the Salesforce login page.

Follow these steps to open your scratch org in the app.

1. In the top right corner of the simulator, click Settings () to open the Choose Connection menu.
   
2. In the Choose Connection menu, click Add () to add a new host.
   
3. The domain for the Host field should be your scratch org URL. You can find this URL by running sf org display user --target-org scratchOrg in a VS Code terminal window.
   
4. Copy the Instance URL from the terminal output and paste it in the Host field in your simulator, like this:
   
   
5. Then, in the top right corner of the iOS simulator, click Done to add the new domain and return to the Salesforce login page.
   
6. In the Username field, copy and paste the Username value from your terminal output in Step 3. The username should follow the format test-value@example.com.
   
7. To get a valid password for this username, in your VS Code terminal, enter sf org generate password --target-org scratchOrg and press Enter.
   
8. From the terminal output, copy the password and paste it in the Password field in your iOS simulator, and then click Log In to Sandbox.
   
9. If needed, enter the verification code sent to the specified email address.
   
10. If the app prompts you for access to your org, select Allow.
    
    

Now, you should see the Salesforce app in your iOS simulator. Let’s navigate to the Component Developer account in the Sales app so we can see Local Dev in action.

1. In the bottom right corner of the app, click Menu and then select Accounts.
   
2. Under Recent Accounts, click Component Developers. You should see your myFirstWebComponent LWC on the page.
   
3. In Visual Studio Code, open myFirstWebComponent.html.
   
4. In the <lightning-card> element, change the value of title from “Contact Information” to “Contact Info”. Here’s what the updated line of code should look like:
   <lightning-card title="Contact Info" icon-name="custom:custom14">
5. Press Command + S on macOS, or Ctrl + S on Windows or Linux, to save the file.
   

Now look back at your iOS simulator to make sure the title of your component has automatically updated itself. See how quickly you can iterate on your components using Local Dev?

That’s it! In this project you installed and used the recommended developer tools for developing Lightning Web Components. You copied and pasted code with errors (which you should avoid in the future). You used Local Dev to see a real-time preview of your Lightning web component changes in a desktop environment. And if you’re a Mac user, you also used Local Dev to preview your component in an iPhone environment.

We can't check your work in a scratch org, but you can still click Verify Step and earn the badge. Then check out the Trailhead Sample Apps and the Lightning Web Component Recipes to see more code examples and learn how to develop great Lightning web components.

Resources

• Trailhead: Set Up Your Salesforce Mobile Developer Tools for Lightning Web Components