Use Built-In Mobile Tools and Features

Before you write code for your users on mobile devices, configure your environment and use built-in mobile-ready tools and features.

To develop Lightning web components that are optimized for mobile, follow these prerequisites and processes.

• 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 SLDS Linter

  SLDS Linter is the latest code analysis tool that helps to prepare your components for use in SLDS 2. SLDS Linter analyzes your code against SLDS 2 rules. It offers suggestions on how to improve your code and make it more future-proof. SLDS Linter can also automatically fix your code and apply those suggestions in bulk across your repository.

After you create a Lightning web component:

• 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.

• Validate Your Base Component References

  Base components help you develop apps quickly. However, not all base components are designed for mobile environments. SLDS Linter or SLDS Validator for VS Code can help you determine the mobile readiness of the base components you use.

• Use Mobile Validation with Salesforce Lightning Design System

  SLDS Linter and SLDS Validator check your code for SLDS mobile guidelines adherence as you type. If they find a potential issue, both tools provide a warning with suggested improvements. These warnings apply to HTML and CSS code. SLDS Linter also automatically fixes your code and applies those suggestions in bulk across your repository.