How to build react-native android CI/CD pipeline using Github Actions + Ms AppCenter

Continuously deploying mobile applications is more complicated than back end applications, and tend to require more manual steps. For the Android platform, you can use GitHub Actions with Ms AppCenter to reduce some of this complexity. You will be able to implement full end to end pipeline from source code to Google play using this.

First, we take the source code from github and build it using the github actions. The built apk will be uploaded to the Ms AppCenter. Then we’ll link the AppCenter with Google Play. Then your testing team will be able to install the test builds via the AppCenter. After the testing process is completed, we will be pushing the same apk to Google Play from the AppCenter.

01. Create a channel on Ms App Center

First go to the AppCenter and add a new organisation by your app name.

Then go to the created organisation and add a different app for each environment that you want to implement the pipeline. I go with ENV_DEV, ENV_TEST and ENV_PROD, if your organisation has more you can add those as well.

Now we need to generate API token for every app and should store in the github secrets for future use. Go to app > settings and click App API tokens at the bottom.

Click the New API token and generate a token by giving the full access. Please make sure to save the token somewhere else secure. Because you won’t be able to see it again once you close that popup.

Go to your github repo > Settings and select Secrets > Actions on the left panel. Click New repository secret on top right. Add name as APP_CENTER_TOKEN_MYAPP_ANDROID_TEST and paste the token on value section.

Do this for all three apps (ENV_DEV, ENV_TEST, ENV_PROD) and add the token in github secrets.

Go to the app on AppCenter select Distribute > Groups , create a testing group and add your testers there. Do this for each app. I have named my testing groups as same with the app name (ENV_DEV, ENV_TEST, ENV_PROD)

If you want to know more about Ms AppCenter. Refer the AppCenter documentation.

02. Create a workflow in Github Actions

Now we are going to create our pipeline using Github Actions. Go to your github repo, select Actions tab and click the New workflow on top left.

There are so many predefine templates which you can use. But click on set up a workflow yourself button. Let’s create our pipeline from the scratch.

Then give the name to yml file (deploy-android-test.yml) and commit the changes.

03. Build the workflow

There’s an already generated template code is there on the yml file. But let’s delete it and build our own script from the beginning. Let’s start to edit our deploy-android-test.yml file.

Here I’m going to explain the workflow that I have setup for my TEST pipeline. First you should give a name to your workflow. Then we have to set a trigger to run the pipeline. For TEST, I have triggered from a tag. Developer should create a tag with the following format vX.Y.Z(i) you can customise this anyway. Once they create a tag and push it to the origin, then the our TEST pipeline will start to run. As an example create a tag v2.2.3(1) and push it to origin, then your pipeline will automatically be triggering.

name: Deploy-Android-TEST
on:
  push:
    tags:
      - 'v[0-9]+.[0-9]+.[0-9]+([0-9]+)'

Then we need to add our AppCenter token, app name and all other constants as environmental variables. Then we can use those anywhere in our script. Make sure to enter the app name as organization_name/app_name format and give the same testing group name which you have created in AppCenter channel as the TESTING_GROUP.

env:
  APP_CENTER_TOKEN: ${{ secrets.APP_CENTER_TOKEN_MYAPP_ANDROID_TEST }}
  APP_NAME: ${{ ‘MyApp-Android/ENV_TEST’ }}
  TESTING_GROUP: ${{ ‘ENV_TEST’ }}
  UPLOAD_FILE: ${{ ‘android/app/build/outputs/apk/app-release.apk' }}

Now we need to start our job, setup our container and setup the environment.

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: set up JDK 1.8
        uses: actions/setup-java@v1
        with:
          java-version: 1.8

Then we are going to build our apk, run npm install and all the necessary commands that you need to build the apk file. Please make sure to generate keystore and add those in your app/build.gradle before doing that. Read this to learn more about react-native android build process.

- name: Install dependencies
  run: npm install
- name: Build android
  run: npm run cd android && ./gradlew assembleRelease

Now we have completed building our apk file. Then we are going to upload it the Appcenter. We are using wzieba plugin for that.

- name: Upload to App Center
  uses: wzieba/AppCenter-Github-Action@v1
  with:
    appName: ${{ env.APP_NAME }}
    token: ${{ env.APP_CENTER_TOKEN }}
    group: ${{ env.TESTING_GROUP }}
    file: ${{ env.UPLOAD_FILE }}
    notifyTesters: true
    debug: false

If you set notifyTesters as true, then all the testers in the testing group will be notified through an email after every new release. Now we are done with our github actions script. Here is our full script.

04. Link Google Play with AppCenter

Once we have completed the pipelines for all the environments, then we can link the AppCenter ENV_PROD channel with Google Play. After you have completed the prod verification testing on the AppCenter, you can publish the same verified apk to Google Pay. This process is really easy and bug free.

First you need to create a Google Dev Console API credentials file from the Google play console. Then you need setup an API access client. Then create a service account from Google API Console and create a key inside it and import it as a .json file. If you feel bit confusing about how to do that, you can find a step by step guide from microsoft documentation.

Now go to the AppCenter and select the ENV_PROD channel. Go to Distribute > Stores, you can see a Connect to Store button there.

Go ahead and select Google Play. You will be asked to upload the Dev Console API credentials file. Upload the json file that we have created in previous step. Then click connect.

Add the package name of the app that you want to connect and click Assign. We are done now.

Now you can see the Google play distribution options on your Stores window.

05. Publish the Application on Google Play

Go to Distribute > Releases and select the release that you want to publish on Google play.

Select Distribute on top right and click Store.

Select Production and click next.

Give the release note that you need to display on Google Play and click next.

Click publish and you are done.

Congratulations! Now you have completed the end to end pipeline from github to Google Play. Cheers!!

06. Where to go from here?

Obviously the next step would be implementing a pipeline for iOS. It’s bit complex than this with Apple signing certificates, provisioning and all. But don’t worry. Read our next article we have explained everything from the zero there.