This action allows you to automate expo build previews on pull requests to test your Expo app builds!
With this preview action, you can test changes made in pull requests via Expo Go or custom development client (created with expo-dev-client) just by scanning QR code.
This action requires expo-cli to be set up in your action environment. You can do it by yourself, but we encourage you to use expo-github-action to make this process as easy as possible.
Note: You need to be logged in to
expo-cli(expo automatic login).
⚠️ If you're using a custom development client, your native project needs to contain configuredexpo-updatesto be able to open published applications.
This action will publish your project (to your configured channel) using expo-cli and produce output with the following variables:
EXPO_MANIFEST_URL- A URL pointing to the expo manifest of the published version.EXPO_QR_CODE_URL- A URL pointing to the generated QR code which can be scanned using Expo Go or custom development client.EXPO_PROJECT_URL- URL pointing to the expo project page with customizable QR code and deep link. This page lets you get the code/url for varying clients (expo go, or your expo development build). More on project pages here.EXPO_NEW_BUILD_IS_REQUIRED- Whether a new build of your application is required to open generated preview.EXPO_NEW_BUILD_IS_REQUIRED_MESSAGE- If a new build of your application is required to open generated preview, it will contain a default warning message.
You can use those variables to do whatever you want. For example, you can chain this action with unsplash/comment-on-pr to add a comment with QR code under pull request. See example workflows below.
This action is customizable through variables - they are defined in the action.yml. Here is a summary of all the variables that you can use and their purpose.
| variable | required | description |
|---|---|---|
channel |
✔️ | The name of the update channel where your application will be published. Learn more. |
project-flavor |
❌ | The type of the project. Available options: 'development-client' or 'expo-go'. Defaults to 'development-client'. |
scheme |
❌ | The deep link scheme which will be used to open your project. This value isn't required, but we recommend setting it. Otherwise, action tries to guess the value. If you are using Expo Go to preview changes, this option is ignored. |
project-root |
❌ | The path to the folder where package.json lives. Defaults to main directory of the repository. |
expo-cli-path |
❌ | The path to the expo-cli. If you're using the expo-github-action or expo-cli was installed in the bin folder, you should ignore this option. |
android-manifest-path |
❌ | The path to the AndroidManifest.xml. If scheme was provided or you're using the managed workflow, this option is ignored. |
ios-info-plist-path |
❌ | The path to the Info.plist. If scheme was provided or you're using the managed workflow, this option is ignored. |
Before you dive into the workflow examples, you should know the basics of GitHub Actions. You can read more about this in the GitHub Actions documentation.
Below you can see the example configuration to create a QR code on each pull request.
The workflow listens to the pull_request event and sets up Node 14 using the Setup Node Action.
It also auto-authenticates when the token is provided.
---
name: Create preview
on: [pull_request]
jobs:
preview:
name: Create preview
runs-on: ubuntu-latest
steps:
- name: Set up repository
uses: actions/checkout@v2
- name: Set up Node
uses: actions/setup-node@v1
with:
node-version: 14.x
- name: Set up Expo
uses: expo/expo-github-action@v7
with:
expo-version: latest
token: ${{ secrets.EXPO_TOKEN }}
- name: Install dependencies
run: yarn install
- name: Publish to Expo & create a QR code
uses: expo/expo-preview-action@v1
with:
channel: pr-${{ github.event.number }}
id: preview
- name: Comment deployment link
uses: unsplash/comment-on-pr@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
msg: >
You can [preview the PR here](${{ steps.preview.outputs.EXPO_QR_CODE_URL }}).<br><br>
<a href="${{ steps.publish.outputs.EXPO_QR_CODE_URL }}"><img src="${{ steps.preview.outputs.EXPO_QR_CODE_URL }}" height="512px" width="512px"></a>
<br><br>
QR code not working or need a different client? Try the QR code or deep link from the [project page](${{steps.preview.outputs.EXPO_PROJECT_URL}}).
<br><br>
${{ steps.publish.outputs.EXPO_NEW_BUILD_IS_REQUIRED_MESSAGE }}Below you can see the example configuration to create a QR code on each pull request, but only if app files were changed. The workflow listens to the pull_request event and sets up Node 14 using the Setup Node Action. It also auto-authenticates when the token is provided.
---
name: Create preview
on:
pull_request:
paths:
- 'package.json'
- 'app.json'
- '**/*.js'
- '**/*.ts'
jobs:
preview:
name: Create preview
runs-on: ubuntu-latest
steps:
- name: Set up repository
uses: actions/checkout@v2
- name: Set up Node
uses: actions/setup-node@v1
with:
node-version: 14.x
- name: Set up Expo
uses: expo/expo-github-action@v7
with:
expo-version: latest
token: ${{ secrets.EXPO_TOKEN }}
- name: Install dependencies
run: yarn install
- name: Publish to Expo & create a QR code
uses: expo/expo-preview-action@v1
with:
channel: pr-${{ github.event.number }}
id: preview
- name: Comment deployment link
uses: unsplash/comment-on-pr@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
msg: >
Awesome! You can [preview the PR here](${{ steps.preview.outputs.EXPO_QR_CODE_URL }}).<br><br>
<a href="${{ steps.publish.outputs.EXPO_QR_CODE_URL }}"><img src="${{ steps.preview.outputs.EXPO_QR_CODE_URL }}" height="512px" width="512px"></a>
<br><br>
${{ steps.publish.outputs.EXPO_NEW_BUILD_IS_REQUIRED_MESSAGE }}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent