Check on GitHub
Report an issue

React Native Release

📡 What you will learn

  • Deploy a Progressive Web App using react-native-web to a website

👾 Before we start the exercise

What is a PWA?

A PWA (Progressive Web App) is a web application that is designed to work offline and can be installed on the user's device, just like a native mobile app.

It combines the best of both worlds, providing a native app-like experience within the web browser. It's usefull to have this solution for 2 reasons:

  1. Sharing logic between your web and of native mobile app.
  2. Have a fallback solution if your users are using old smartphones or a brand without Google Play support.

👨‍🚀 Exercise 4

We are going to build a PWA with react-native-web.

expo build:web
  • Deploy to vercel with:
cd web-build
vercel

You should see a URL that you can use to view your project online. Paste that URL into your browser when the build is complete, and you will see your deployed app!

⚠️ It's important to note that while react-native-web allows you to build a PWA that has a native app-like user experience, it's still a web app and will not have all of the capabilities of a native app. For example, it will not have access to native device features, such as the camera or Bluetooth, unless they are available through a web API.

👽 Bonus

We can automate the release process with GitHub actions. This script will trigger the action to run whenever a change is pushed to the main branch or a pull request is merged into main.

  • Create a file on your GitHub repository .github/workflows/production.yml
  • Add a "📦 Build Expo Web" and "📦 Vercel Deploy" step
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

steps:
  - name: Expo Web
    if: github.event_name == 'push' || github.event_name == 'pull_request'
    uses: expo/expo-github-action@v5
    with:
      expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
      expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
      expo-cache: true

  - name: Install dependencies
    if: steps.yarn-cache.outputs.cache-hit != 'true' && (github.event_name == 'push' || github.event_name == 'pull_request')
    run: yarn

  - name: 📦 Build Expo Web
    if: github.event_name == 'push' || github.event_name == 'pull_request'
    working-directory: ./packages/app
    run: expo build:web

  - name: 📦 Vercel Deploy
    if: github.event_name == 'push' || github.event_name == 'pull_request'
    uses: amondnet/vercel-action@v20.0.0
    with:
      vercel-token: ${{ secrets.VERCEL_TOKEN }}
      github-token: ${{ secrets.GITHUB_TOKEN }}
      vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
      vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
      scope: TEAM