Giter VIP home page Giter VIP logo

lwc-mobile-samples's Introduction

Samples for Previewing Lightning Web Components on Mobile

Welcome to the Mobile Preview samples repo. Here, you can find sample projects and apps that let you preview Lightning web components several ways:

  • In your desktop browser
  • In the mobile browser of an iOS or Android virtual device
  • In a native app running on an iOS or Android virtual device

IMPORTANT! Before running this sample Lightning Web Component project, you must configure it to use a scratch org. If you're not familiar with this concept, we recommend completing the following trails. These trails demonstrate how to set up your development environment and configure a Lightning Web Component project with a Salesforce scratch org:

What's Included

Samples in this repo include Lightning Web Component projects and native mobile apps. The native apps are configured to recognize and display a component running on a local server.

Lightning Web Component Projects

These samples define Lightning web components and demonstrate configurations for previewing them.

HelloWorld This sample Lightning Web Component project demonstrates how to preview locally. It contains a basic Lightning web component, along with mobile-apps.json - a configuration file that defines how to preview this component in native mobile apps.

This file points to configure_android_test_app.ts and configure_ios_test_app.ts files. Together, these files demonstrate how you can

  • Configure your apps to show up in the VSCode preview dialog boxes.
  • Define the optional get_app_bundle parameter. You can implement it to compile the app or perform any other setup steps.

For more information on mobile-apps.json, see

Native Mobile Apps

These samples let you preview Lightning web components in standalone native apps.

apps/ios/LwcTestApp

A sample app that you can use to preview a Lightning web component in a native iOS app.

apps/android/LwcTestApp

A sample app that you can use to preview a Lightning web component in a native Android app.

Previewing the Hello World Sample

After you've set up your environment, connect the HelloWorld sample project to your scratch org and preview your component. You can use the following instructions as a model for previewing other Lightning web components.

  1. In VS Code, open the HelloWorld folder.

  2. Configure the HelloWorld project to use a scratch org. If you already have a scratch org, skip to step 3. If you don't have a scratch org:

    1. In VS Code, press Cmd+Shift+p (macOS) or Ctrl+Shift+p (Windows).
    2. Type in Scratch and select SFDX: Create a Default Scratch Org.
    3. Follow the onscreen steps to create a scratch org. The recommended trails provide detailed information on these steps.
    4. Ensure that a success message appears in the VS Code Output window.

  3. Authorize the HelloWorld project to use your scratch org.

    1. In VS Code, press Cmd+Shift+p (macOS) or Ctrl+Shift+p (Windows).
    2. Type in Authorize and select SFDX: Authorize an Org.
    3. Follow the onscreen steps to log into your Salesforce Org with your credentials. The recommended trails provide detailed information on these steps.
    4. Ensure that a success message appears in the VS Code Output window.

  4. Now that your HelloWorld project is connected to your scratch org, preview it locally.

    1. In VS Code, navigate to force-app > main > default > lwc.
    2. Right-click helloWorld and select SFDX: Preview Component Locally.
    3. Select whether you'd like to preview it in your desktop browser or on an iOS or Android device.
    4. If you chose iOS/Android, either
      • Select an available virtual device from the presented list (if one appears), or
      • Choose to create a virtual device.
    1. Indicate whether you'd like to preview the component on your mobile browser or in the provided native LWC Test App.

Your virtual device launches, and your component preview appears.

For full documentation, see Preview Lightning Web Components on Mobile.

lwc-mobile-samples's People

Contributors

maliroteh-sf avatar khawkins avatar ibenitamar avatar rotem-hen-sf avatar karinlackrif avatar dependabot[bot] avatar daniel94104 avatar yongbozuo avatar akash-patel55 avatar rwhitley avatar sahar-cohen-sf avatar mcohenh avatar svc-scm avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.