Delivery android applications using Azure DevOps and Firebase

I recently had a challenge at GFT Brazil, which consisted of arranging a CI/CD pipeline of a mobile application built with React Native.

The scenario was basically: An app already available on the market, where an update with corrections and new features needed to be delivered to testers.

This delivery was already 3 weeks late. However, another very relevant factor to aggravate this scenario and that we must take into account is that some of these updates were made by another consultancy company, working in parallel with GFT and the entire DevOps infrastructure was designed by the client’s team, who decided to migrate their pipeline to use Firebase App Distribution. This migration broke, turning off this pipeline for 3 weeks. That is, no updates and new features were delivered to testers for 3 weeks, and consequently nothing was delivered to the store. In this article, I will demonstrate how to build a pipeline like the one used in this case, with the same technologies and services.

Requirements

In this article, we will need following requirements:

▪ Yarn

▪ Azure DevOps account

▪ Firebase account

▪ Fastlane

▪ Visual Studio Code

Adding Firebase to application

The first step is adding Firebase to the React Native application, open the Command Terminal in Visual Studio Code and execute the following command.

yarn add @react-native-firebase/app

Configuring the Fastlane in application

Here, I´ll understand that you´ve added the Fastlane in React Native application. If you have more questions about this, see this step by step “Getting started with Fastlane for React Native” accessing the link:

https://docs.fastlane.tools/gettingstarted/cross-platform/react-native

▪ Pluginfile

In the Pluginfile file, found in “android/fastlane”, add plugins for increment version code and the plugin for firebase app distribution.

gem ‘fastlane-plugin-increment_version_code’

gem ‘fastlane-plugin-firebase_app_distribution’

▪ Fastfile

In the Fastfile file, found in “android/fastlane”, add a lane to setting the increment version code and build type to release.

lane :development do

increment_version_code(version_code: ENV[“BUILD_BUILDID”])

gradle(task: ‘assemble’, build_type: ‘Release’)

end

▪ Build.sh

In the Build.sh file, found in “android/fastlane”, add an environment variable with the name “Environment”. The value of the variable will be set up in the Release pipeline.

Firebase console

Login in Firebase and navigate to Firebase Console. Create a new project in the firebase console selecting “+ Add project”.

▪ Adding Firebase to your project

Select the android icon. Thereafter, write the name of your application´s package. This topic requires attention, because the package name must be identical to the name used in the React Native application.

▪ Getting application code

Navigate to Project Settings. In the Your Apps section, select the project and save the “App Id” value. This value will be used to set up the Release Pipeline in the next steps.

▪ Adding testers

In the left side menu, select “App Distribution” and in the Testers & Groups session, create groups and add tester’s email. This step is necessary to Firebase App Distribution to send the app by e-mail to testers.

▪ Getting Firebase Token

The firebase token is necessary to login on CI Server. This is important to Release Pipeline deliver the app correctly to the Firebase account.

Install the Firebase CI in your machine. To download the installer, accessing the link: https://firebase.google.com/docs/cli .

After installing, execute the command to login:

firebase login:ci

In the terminal, a URL will be displayed to access and login with your Firebase account. After successfully login, copy the token from the terminal. You will use this token in the release pipeline set up step.

Azure DevOps

You will use the Azure DevOps Repo and Azure DevOps Pipelines. Create a Git versioning project and upload the project code. Pay attention to project´s folder structure, this can impact the next steps. The image below shows how the folder structure is reported in this example.

▪ Create the Pipeline

The pipeline is the process where in which you will generate the application artifact. This artifact will be used for delivery by the Release.

Config the Pipeline to integrate with Repo, selecting Azure Repo Git mode and the Repository with its respective branch.

▪ Tasks of Pipeline

Add the following tasks and their properties in this sequence:

▪ Platform:
Android

▪ React.gradle Path:
android/gradlew

▪ Version Spec:
13.x

▪ Root folder or file to archive:
$(Build.Repository.LocalPath)

▪ Archive type:
Zip

▪ Archive file to create:
$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip

▪ Path to publish:
$(Build.ArtifactStagingDirectory)

▪ Artifact name:
dist

▪ Artifact publish location:
Azure Pipelines

▪ Create the Release

Release is the process for which the artifact created in the Pipeline will be sent to the Firebase. The Release structure is basically one artifact and one or more Stages. You can create different stages, for example, you can create one stage to deliver the application using the development environment and another stage using the same artifact, but deliver the application using the production environment.

Start set up the artifact by selecting the Pipeline created in the previous step. In this example the Pipeline’s name is “Sample-CI”.

▪ Environment variables In this example, create three environment variables.

APP_TOKEN – Add to this variable the value obtained in the step “Getting the application code”.

FIREBASE_TOKEN – Add to this variable the value obtained in the step “Getting Firebase Token”.

ENVIRONMENT – Set to this variable the lane’s name. In this example, the lane’s name was configured in Fastfile step with the value “development”.

▪ Tasks of Release
Add the following tasks and their properties in this sequence:

▪ Archive file patterns
*.zip

▪ Destination folder
$(System.DefaultWorkingDirectory)

▪ Command:
Custom

▪ Command and arguments:
install -g react-native-cli

▪ Command:
Custom

▪ Command and arguments:
install –no-optional

▪ Platform:
Android

▪ React.gradle Path:
android/gradlew

▪ Script:
gem install bundler:1.16.1

▪ Script:
npm install firebase-tools -g

▪ Type:
File path

▪ Script path:
$(System.DefaultWorkingDirectory)/android/fastlane/build.sh

▪ Script:
firebase appdistribution: distribute android/app/build/outputs/apk/release/app-release.apk
–app $(APP_TOKEN)
–groups beta-testers
–release-notes “Development”
–token $(FIREBASE_TOKEN)

Note that the APP_TOKEN and FIREBASE_TOKEN environment variables are referenced in this step. In this task, the Android Application Pack (APK) is ready to be sent to Firebase and the Firebase App Distribute will send the app by e-mail to testers group.

Summary

Following the steps mentioned in this article, you will be able to have this application delivered by email to registered testers, as shown in the figure below. In addition, you can manage versions and distribute to other testers through the Firebase console.