Create preview branches for React Native apps with Expo + EAS from your CI with GitHub Actions
Working on a React Native application using EAS + Expo Go.
The Context
The Problem
I have used preview deployments with NextJS and Vercel before. They allow any non-technical stakeholder to validate a feature before it gets into the main branch (defects are found earlier and the main branch remains releasable at any time).
There’s nothing like this for React Native!
EAS with Expo Go provides a platform which makes it easy to put a WIP app in stakeholders hands which updates with continuous deployments.
Goal: why not recreate the DevX of Vercel for React Native with EAS + Expo?!
The Solution
- Create a GitHub actions to create a deployment for every pull request created.
- Run
eas update
against${{ github.head_ref }}
which is the name of the branch (unique per feature and provided by GitHub Actions to the context of the workflow).
- Create a second action to cleanup the EAS channel and branch on merge of the PR, run:
eas channel:delete
(credit to Mo for finding the secreteas channel:delete
command in the EAS CLI to clean up the branches on merge)eas branch:delete
- We also did some clever stuff to print out to the pull request the QR code to scan to get the deployment directly in the Expo Go app via the QR code scanner - you’ll need to read the full article get all the details!
The Code
# .github/workflows/expo-preview-deploy.yml name: Deploy EAS Preview Branch for Feature on: push: branches-ignore: - main jobs: update: name: EAS Update runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 # Expo installation steps - name: Publish update run: eas update --branch ${{ github.head_ref }} --auto
# .github/workflows/expo-preview-cleanup.yml on: pull_request: types: - closed jobs: update: name: Cleanup EAS Preview Channel and Branch for Feature runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 # Expo installation steps - name: Delete Channel run: eas channel:delete ${{ github.head_ref }} --non-interactive - name: Delete Branch # Temporary workaround: `eas channel:delete` always throws an error if: success() || failure() run: eas branch:delete ${{ github.head_ref }} --non-interactive