Use Built-In Mobile Tools and Features
-
Set up your development
environment
We recommend setting up the VS Code editor and the Salesforce DX tools for an end-to-end development experience. You’ll also want to set up a local development server and other tools that can help with mobile development.
-
Install the mobile extensions
plug-in for VS Code
Inspect and preview your components on virtual mobile devices before you deploy them to mobile users.
-
Install the SLDS validator for VS
CodeThe SLDS validator enables syntax highlighting and code completion with intelligent token and utility class recommendations. The validator optimizes your component styling and helps you build components across screen sizes without having to memorize all the SLDS guidelines. It also checks for usage of base components that aren’t deemed mobile ready and suggests replacement options.
-
Validate the component in mobile
preview environments
The preceding list of prerequisites prepares your environment for mobile previews, which helps you validate your visual changes and other basic mobile behavior.
-
Configure your component for
Lightning App Builder
Configuring your component for Lightning App Builder allows an admin or business user to use the component when they create or customize Lightning app pages and record pages. Alternatively, you can surface your Lightning web component via a custom tab instead.
-
Create a Lightning app page and
add the component to your mobile navigation
Enable your components for Lightning App Builder to allow admins to create Lightning pages with your components. Lightning app pages and record pages are supported for mobile experiences, such as the Salesforce mobile app and custom mobile apps. If you surface your component in a custom tab instead, make it available to the mobile app via App Manager or Salesforce Navigation in Setup.