Logo

dev-resources.site

for different kinds of informations.

Automate Your Expo Builds with EAS Using GitHub Actions: A Step-by-Step Guide (Android)

Published at
7/7/2024
Categories
reactnative
expo
frontend
mobile
Author
jocanola
Categories
4 categories in total
reactnative
open
expo
open
frontend
open
mobile
open
Author
8 person written this
jocanola
open
Automate Your Expo Builds with EAS Using GitHub Actions: A Step-by-Step Guide (Android)

Developers get 30 free builds each month (up to 15 iOS builds) with EAS Build. While this seems much at first glance, it can be quickly exhausted in a serious hobby project, let alone a professional environment.

Additionally, the queue for builds can be very long, sometimes taking up to 90 minutes or more before starting.

This wait can be problematic if you need to fix high-severity or security issues urgently. Local builds (--local) are an alternative, but the process is repetitive and unavailable to Windows users.

In this article, we will cover how to avoid these issues efficiently using GitHub Actions.

Prerequisites

Step 1: Setup your project

Ensure you have your Expo project set up and configured for EAS Build. If not, you can check expo docs On creating your first build

Step 2: Get your Expo access token

You can generate expo tokens that will allow github action to access your account on your behalf. learn more

Getting Expo access token

Step 3: Save this token to GitHub Secrets

In your GitHub repository, navigate to Settings > Secrets and variables > Actions and add the following secrets:

EXPO_TOKEN: your expo access token generated in step 2

Step 4: Create a New Workflow File
In your GitHub repository or locally, create a new directory .github/workflows and add a file named build-apk.yml (you can name this file whatever you want and in my case I created the file inside staging branch).

Enter your workflow name and trigger

name: Build APK with EAS

on:
  push:
    branches:
      - staging
Enter fullscreen mode Exit fullscreen mode

NB:
You may not understand the above code but what you need to understand is the workflow runs when code is pushed to the branch name staging, you can replace it with a different branch.
Learn more about workflows.

Jobs and Steps
Below code specifies the type of virtual machine to run the job: which is ubuntu-latest. you can specify macos-latest when building for iOS.

jobs:
  build:
    runs-on: ubuntu-latest
Enter fullscreen mode Exit fullscreen mode

Steps Within the Job
This code is essential to get the code into the virtual machine.

steps:
      - name: Setup repo
        uses: actions/checkout@v4
Enter fullscreen mode Exit fullscreen mode

Setup node
Uses a pre-built action to set up a Node.js environment

      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: 20.x
          cache: "npm"
Enter fullscreen mode Exit fullscreen mode

Set up JDK 17
Uses a pre-built action to set up a Java environment

      - name: Set up JDK 17
        uses: actions/setup-java@v3
        with:
          java-version: "17"
          distribution: "temurin"
Enter fullscreen mode Exit fullscreen mode

Setup Android SDK
Uses a pre-built action to install and set Android SDK

  - name: Setup Android SDK
        uses: android-actions/setup-android@v3
Enter fullscreen mode Exit fullscreen mode

Setup Expo
Uses a pre-built action to set up Expo

 - name: Setup Expo
        uses: expo/expo-github-action@v8
        with:
          expo-version: latest
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

NB: You must save EXPO_TOKEN to Github secret you can go back to step 2 & 3 if you have not.

Install project depencies

 - name: Install dependencies
        run: yarn install --frozen-lockfile
Enter fullscreen mode Exit fullscreen mode

Build Android App

  - name: Build Android app
        run: eas build --platform android --profile preview --local --output ${{ github.workspace }}/app-release.apk
Enter fullscreen mode Exit fullscreen mode

Upload Build Artifact

      - name: Upload Build Artifact
        uses: actions/upload-artifact@v2
        with:
          name: app-release
          path: ${{ github.workspace }}/app-release.apk
Enter fullscreen mode Exit fullscreen mode

Your build-apk.yml should have below content by now, make changes to your code and push to github.

name: Android App APK Build

on:
  push:
    branches:
      - new-features
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Setup repo
        uses: actions/checkout@v4

      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: 20.x
          cache: "npm"

      - name: Set up JDK 17
        uses: actions/setup-java@v3
        with:
          java-version: "17"
          distribution: "temurin"

      - name: Setup Android SDK
        uses: android-actions/setup-android@v3

      - name: Setup Expo
        uses: expo/expo-github-action@v8
        with:
          expo-version: latest
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Build Android app
        run: eas build --platform android --profile preview --local --output ${{ github.workspace }}/app-release.apk
      - name: Upload APK artifact
        uses: actions/upload-artifact@v2
        with:
          name: app-release
          path: ${{ github.workspace }}/app-release.apk
Enter fullscreen mode Exit fullscreen mode

You can download the Artifact (build file apk or aab) in the job detail's page.

Where you can download the Artifact

NB: For medium or large-sized companies, it is advisable to use the Production or Enterprise subscription, as it includes many additional features that cater to their needs.

Final Thoughts

Employing GitHub Actions for building my projects has saved me a lot of time. Previously, I could only create 2-3 builds per day. Now, I can generate unlimited builds, eliminating repetitive and boring tasks from my workflow. This allows me to focus on what truly matters: building my project.

Thanks for reading till the end.

Next time, I'll cover automating builds and submission of android and iOS to the Play Store and Apple store respectively. Stay tuned!!!

expo Article's
30 articles in total
Favicon
Read Text Asset File in Expo
Favicon
Run Storybook with NX Expo and React Native Paper
Favicon
Explorando Notificações Push no React Native com Expo e OneSignal!
Favicon
Starting React Native Project in 2025
Favicon
Guia Completo: Como Integrar WatermelonDB no React Native 0.76 com Expo 52 e TypeScript
Favicon
How to create authenticated routes with the new Expo SDK 51 using Expo Router
Favicon
React Native Expo with NativeWind v4 and Typescript
Favicon
Translate & Guess: Build a Flag Quiz with Expo and Tolgee
Favicon
How i implemented my server login screen for Mastodon
Favicon
How to Change iOS Push Notifications Permission Dialog with Expo
Favicon
Exploring React Native Navigation with Expo: A Complete Guide
Favicon
How to Render OpenStreetMap in an Expo React Native Web App Using React Leaflet
Favicon
EAS build reads your .gitignore file
Favicon
#2 - Expo apk keeps on crashing after build
Favicon
Dear expo, who are you?
Favicon
npm i openai-react-native
Favicon
Expo51 Jotai Template + flashlist + tamagui
Favicon
Scroll-Responsive Animated Header Bar with Expo Router
Favicon
Expo vs. React Native: Pros, Cons, and Key Differences
Favicon
To Obfuscate or Not Obfuscate (React Native)
Favicon
How to disable keyboard suggestions for Android in React Native
Favicon
Expo51 Jotai Template, ready to use
Favicon
Let's get started with React Native + Expo
Favicon
Generar APK con EAS ⚛️ React Native
Favicon
How to publish your React Native app to Expo Store 2024
Favicon
Creating a WebView app in React Native using Expo
Favicon
Embracing Expo: The New Standard for Creating React Native Apps
Favicon
Automate Your Expo Builds with EAS Using GitHub Actions: A Step-by-Step Guide (Android)
Favicon
How to Generate APK Using React Native Expo
Favicon
Creating Chat Bubbles with curls in React Native (svg)

Featured ones: