Automate your build with Github Actions and Firebase Distribution (React native)

Leonid Olevsky
4 min readJan 22, 2021

--

React native is amazing platform for learning once and write anywhere, what is missing here is to config once and deploy it easy from one place. Github Actions is easy way to configure your build steps (Or any execution you need) by your preferred trigger.
It’s amazing when you can build and publish in a press of a button production build in the Google play and App store.
In this article I will explain how to configure your React native project and get your production build, You can find working config in this repository: https://github.com/lolevsky/react-native-ci

Github Actions in action, you define the steps and it execute them
Github Actions in action, you define the steps and he execute it

My example is based on newly created React native project using react native CLI, you can read about it here https://reactnative.dev/docs/environment-setup#creating-a-new-application

First of all we will need to understand how it works, We have couple of basic configurations that we need to do:

  • What will be your trigger event?
    - Push of commit
    - Pull request creation
    - Schedule
    - Manual trigger
  • What runner it will run? you have couple of options:
    1) ubuntu
    2) windows
    3) macos
    4) self-hosted
    Options 1–3 are not free and it is counted from your quota, if you have spare computer (mac if you want to run iOS build) so you can easily connect it to your repo and run for free on it. (You can read more here https://docs.github.com/en/actions/hosting-your-own-runners/adding-self-hosted-runners)
  • What will be the job you are running?
    Her is the most interesting part, here you are defining what you will execute, can be split in to different steps and dependencies.

If you want to read in details you can read more in the documentation in details: https://docs.github.com/en/actions/learn-github-actions/introduction-to-github-actions

After understanding what we are going to build let’s discuss a bit about configuration that you need to do in order to run your build.

Here are the final 3 files that we will have, you will need to create them at:

/.github/workflows/

Now lets understand what we see here:

  • ON: What will be the trigger to run the job, as you see I used 2 different triggers as I wan to run the tests on push of new code VS manual trigger if I want to run full build and upload.
  • JOBS: Here we are defining what jobs we have, where they will run what they will execute and what is the dependency between the jobs. Each job has his name (For example “build-android-adhoc”), on what it will be running (For example “ubuntu-latest”) and what it will executes that split into steps.
  • STEPS: each step has name (it is optional, it will be easier for us to see it in the execution console), what plugins it uses (There are a lot of them in marketplace, they are open source and can save you a lot of time) and in case you want to ran your own command you can do it with “run”.

The execution plan is very easy to read and understand in this case, each step run after another in linear way.

One important note! each job can run in different machine (As prices between them are different and if you want to save some money you should split what run where), but you will need to pass the archive between them to continue your execution.

If you have security concern, for example you have keystore and you have certificates, or maybe some secret passwords (For example Firebase tokens) and you don’t want to put it as part of your repository, you want to keep it secret!

Github Actions provide you a way to store and manage your secrets, there is an explanations in details about it here:
https://docs.github.com/en/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository

If you are storing files (keystore, certificate…), you should do base64 on the content and store it as a text.

Ease way to have base64 output is to run (on mac):

cat /path/my_file.something | base64 > my_file.txt

And then copy the content of the file fully to the secret.

After we had successful execution of the build we want to distribute our apps (IPA and APK) to our testers, I found it very easy to do with Firebase distribution, it is free service and easy to config, you can follow up the steps on there website how to do it:
https://firebase.google.com/docs/app-distribution

Firebase app distribution

As there is a plugin in Github marketplace https://github.com/marketplace/actions/firebase-app-distribution it is very simply to do, by passing app id and token for each platform.

I hope this example was useful for you, please let me know if you are missing something or it was not clear enough so I will improve. Leave a comment and give claps if you liked to support me.

Fully working example can be found in this repo, you can fork it, configure your secrets and start building!
https://github.com/lolevsky/react-native-ci

--

--