Intergrating GitHub Actions For Automating App Builds

Intergrating GitHub Actions For Automating App Builds

Trigger builds for your Expo app with EAS Build using GitHub Actions and make app development a breeze through automation

ยท

6 min read

In this article, I'll be demonstrating how I managed to automate builds for iOS and Android for my Expo app.

There are many repetitive tasks that we do to build our app before submitting it to the testflight for testing whenever we make new changes. What if someone else could do these tasks for you whenever you push your code to some branch?

Say hello to GitHub Actions! ๐Ÿค

GitHub Actions are commands that we can trigger when something changes in our repository. In this article, we'll be writing a pipeline for our Expo Managed App that will trigger a new testflight build using EAS Build and make it available to all the testers whenever we push our code to the development branch. As we are doing this using the EAS Build, let's look at a quick introduction to EAS Build.

EAS Build is a new feature from Expo, it is a hosted service for building app binaries for your Expo and React Native projects. It makes building your distributing apps simple and easy by automating and providing defaults that work well for Expo and React Native projects out of the box. They can also handle your app by signing credentials for you (if you wish). EAS Build also makes sharing builds with your team easier than ever with internal distribution (using ad hoc and/or enterprise "universal" provisioning) and it also deeply integrates with EAS Submit for app store submissions as it has first-class support for the expo-updates library. It's the next generation of the expo build:[ios/android] command and is designed to work for any native project, whether or not you also use the managed workflow. It's the fastest way to get code from expo init or npx react-native init to app stores.

If you want to read more about EAS build. Head over to these docs.

Triggering builds Using GitHub Actions

Before building with EAS on CI, we need to install and configure eas-cli. Then, we can trigger new builds with the eas build command. Let's see how this is done:

Prerequisites

To trigger EAS builds from a CI environment, we first need to configure our app for EAS Build and successfully run a build from the local machine for each platform that we'd like to support on CI. If you have run eas build -p [all|ios|android] successfully before, then you can continue.

Note: For creating builds for ios and android there are multiple configurations that we need to do for certificates and stuff. For that, you can refer to this link.

Configure your app for CI

Create a new file eas-build.yml and add it into .github/workflows/ in the root of your repository using the snippet given below:

name: EAS PIPELINE
on:
  push:
    branches:
      - development
  workflow_dispatch:

jobs:
  build:
    name: Install and build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: Reconfigure git to use HTTP authentication
        run: >
          git config --global url."https://github.com/".insteadOf
          ssh://git@github.com/

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: Setup Expo
        uses: expo/expo-github-action@v6
        with:
          expo-version: 4.x
          token: ${{ secrets.EXPO_TOKEN }}
          expo-cache: true

      - name: Install dependencies
        run: npm ci

      - name: Authenticate git name
        run: git config --global user.name "Sakshya Arora"

      - name: Authenticate git email
        run: git config --global user.email "sakshya@geekyants.com"

      - name: Build on EAS
        run: EAS_BUILD_AUTOCOMMIT=${{1}} npx eas-cli build --platform all --non-interactive

  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: Reconfigure git to use HTTP authentication
        run: >
          git config --global url."https://github.com/".insteadOf
          ssh://git@github.com/

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      - name: Setup Expo
        uses: expo/expo-github-action@v6
        with:
          expo-version: 4.x
          token: ${{ secrets.EXPO_TOKEN }}
          expo-cache: true

      - name: Install dependencies
        run: npm ci

      - name: Submit to testflight
        run: EXPO_APPLE_APP_SPECIFIC_PASSWORD=${{ secrets.EXPO_APPLE_APP_SPECIFIC_PASSWORD }} npx eas-cli submit -p ios --latest --non-interactive

      - name: Submit to playstore
        run: npx eas-cli submit -p android --latest --non-interactive

Understanding the basic terminologies used in this file.

  • The name to our action ( EAS PIPELINE)

  • The action, which triggers this pipeline (In our case, when we push to the development branch).

  • Start a list of tasks that should run once this action is triggered.

  • First one is a build action (Install and build).

  • runs-on command which tells GitHub where the runner will execute this job (this is a virtual server and you can choose between Windows/Mac/Linux).

  • Each job can have multiple phases which are grouped together by the steps keyword.

  • The uses keyword tells the script what action to play.

  • The needs keyword tells the job that the job should only run after the dependent step is complete. (Our deploy step needs build step to complete first).

Understanding the other main steps of each job in the pipeline.

  • You can run a build job using the following command:
       - name: Reconfigure git to use HTTP authentication
        run: >
          git config --global url."https://github.com/".insteadOf
          ssh://git@github.com/
  • This step is not required for most of the users. In my case, it was required because I was using a package from my own repo and it was being used by utilising ssh.

    For more info - You can look into this issue.

  • Here's the command to setup Expo:
      - name: Setup Expo
        uses: expo/expo-github-action@v6
        with:
          expo-version: 4.x
          token: ${{ secrets.EXPO_TOKEN }}
          expo-cache: true
  • As the name suggests, this step is to set up Expo and to do this, we need to create an EXPO_TOKEN.

To see how to create an access token, you can head over to this link

  • After creating the EXPO_TOKEN, add that token to the secrets of your GitHub repo using the code given below:

Settings -> Secrets -> New repository secret

  • After adding the token, the result should look like this: Screenshot 2021-11-17 at 1.22.23 PM.png
         - name: Build on EAS
            run: EAS_BUILD_AUTOCOMMIT=${{1}} npx eas-cli build --platform all --profile development --non-interactive
  • This step is for building an Expo app using eas build. You must be wondering about EAS_BUILD_AUTOCOMMIT=${{1}} and simply put it was required because I was using the autoIncrement property in my eas.json which requires your code to be committed.

deploy job:

Most of the steps in this job are the same as it is in the build job. To submit our app, we need to make some changes for iOS and Android in eas.json.

  • Use the following code for iOS:
"ios": {
    "appleId": "",
    "appleTeamId": "",
    "ascAppId": "",
    "companyName": ""
}
  • For this step, your app must be there in AppStore connect in order to get the ascAppId for the app. Use the code given below:
      - name: Submit to testflight
         run: EXPO_APPLE_APP_SPECIFIC_PASSWORD=${{ secrets.EXPO_APPLE_APP_SPECIFIC_PASSWORD }} npx eas-cli submit -p ios --latest --non-interactive
  • This step submits the app to the testflight once the build is completed while the --latest flag is to take the required build from Expo builds. We also require an Apple app-specific password for this step.

Refer to this link to create an Apple app-specific password.

  • Use the following snippet to submit your build to the store:
      - name: Submit to playstore
        run: npx eas-cli submit -p android --latest --non-interactive
  • For this step, your app must be uploaded to the console manually once.

To sum it up...

These are the basic steps to set up GitHub actions for automating app buils. Refer to the following articles for more news on the subject:

Thanks for reading ๐Ÿ˜ƒ. I hope this article helped you to create a pipeline for your Expo app. Do comment!

ย