Publish a Production-ready React Native App to Firebase App Distribution Using Fastlane

Victor Bruce-Crabbe
May 16 · 6 min read
Photo by Adi Goldstein on Unsplash

In part two of our blog series on building a production react-native app and publishing to an application market, we looked at how we can distribute a pre-release version of our app to a group of testers to Firebase App Distribution from the Firebase console.

Even though using Firebase console to distribute your app is simple and straightforward, the steps involved are very repetitive. As programmers, we like to automate repetitive tasks right?😀 In doing so, we will use a tool called Fastlane to perform a series of steps to publish our app to Firebase App Distribution by running a single command.

What is Fastlane?

Fastlane is an open-source tool for automating the development and releasing process of apps (Android and iOS) to the application market. Fastlane gives you the ability to automate every aspect of your development and release workflow such as:

  1. Automatically generate localized screenshots for the app store.
  2. Easily distribute beta builds to testers.
  3. Publish a new release to the app store in seconds.
  4. Dealing with code signing.

Installing Fastlane

System Requirements:

  • Fastlane is officially supported to run on macOS. 🐧 Linux and 🖥️ Windows are partially supported.
  • You should have ruby with versions 2.4 through 2.7 installed on your macOS. Check your version by running the command

There are two methods of installing Fastlane on your local machine. We have the managed(macOS/Linux/Windows) and Homebrew(macOS)

Managed (macOS/Linux/Windows):

  1. Install Bundler: used to define your dependency on Fastlane.

2. Install Fastlane

Homebrew (macOS):

Setup Fastlane in Your Project

Currently, the only file we have worked with is our file. At this point whilst setting up Fastlane, we will also structure our react-native project structure by following the steps below:

  1. Create a folder in the root of your project
  2. Move file inside the folder(if vscode fails to automatically change the path to App.js file inside index.js, you will have to do that yourself manually)
change import path for App.js file on line 6 to ‘./src/App’

3. Create a folder called fastlane also at the root of the project

4. Lastly, we will create a fastlane file called inside

❗️Note: Another approach to creating a fastlane project is to run the command and answer all the interactive setup questions to complete the setup.

Building Lanes

Under this section, we will perform the following steps:

  • Build a lane to distribute the App to Firebase App Distribution for Android
  • Add Firebase App Distribution plugin to fastlane configuration
  • Authenticate with Firebase

Build a lane to distribute the App to Firebase App Distribution for Android

  1. First, we will create a platform for Android to define our lanes.
create an android platform and add a description

2. Next we will define a lane called . Under this lane, we will define a series of actions to build and distribute the App to Firebase App Distribution.

Building The Android App

building the android version of the App using Gradle

Explanation of the code above:

  • On line 3–5, we define a lane called distribute to run series of actions
  • On line 4, we call Gradle and pass in four(4) important arguments to the gradle() function.
    Gradle is a build system responsible for code compilation testing, and deployment.
    For gradle to build our code, we will need to pass the task gradle should run, the project directory gradle should run from, and most importantly the properties(store file, store password, key alias, and key password).
pass the values needed by Gradle to build the app

Hide Secrets

We cannot expose sensitive information such as the store password, key password, etc in our Fastfile. We will define all our secrets in an env file and add them to a gitignore file so that we don’t commit the env file to a versioning tool like Git and Github.

  1. Create .env file inside the fastlane folder and store all your secrets
storing secrets in an .env file

2. Import the library and file in the FastFile.

import dotenv library and .env file

The code above imports the dotenv library on line 1 which is used to manage environment variables and the file which contains secrets we do not want to expose.

On lines 3–4, we are instructing Fastlane to load our file first before any action defined in the FastFile is considered. This will load the values needed by the actions first before running any action.

Add Firebase App Distribution plugin to fastlane configuration

The next step is to install the Firebase App Distribution plugin. Run the command:

Result after adding firebase_app_distribution plugin

Authenticate with Firebase

The final piece is to add a Firebase App Distribution action block. But before that, we will have to authenticate with Firebase. Below are the following ways to authenticate with Firebase:

  • Sign in to your Google Account via the plugin’s login action
  • Use Firebase service account credentials
  • Sign in using the Firebase CLI

In our case, we will use the method of signing in to a Google Account via the Firebase App Distribution plugin’s login action.

Steps:

  1. Run the following command:
bundle exec fastlane run firebase_app_distribution_login
run the bundle exec fastlane run firebase_app_distribtion_login command

2. Open the link in a browser.

open the generated link in the browser

3. When prompted, sign in to your Google Account and grant permission to access your Firebase project. Copy the resulting code from the login browser and paste it into the command line. The login action then prints a refresh token, which the App Distribution plugin uses to authenticate with Firebase.

refresh token

4. Pass the token from the previous step to the plugin, using either the parameter in your FastFile or by setting the environment variable.

paste the copied refresh token here.

Add Firebase App Distribution Action Block

firebase_app_distribution action block

Pass in your appId, list of testers, firebase CLI token, and release notes.

❗️Note: make sure to hide your Firebase CLI token safely in your .env file.

Running The Lane

In the end, this is how your FastFile should look like:

final FastFile

To build and distribute the app to Firebase App Distribution, run the command

successfully build and distribute the app to FastLane
Apk file uploaded to Firebase app Distribution

Recap:

In this blog post, we looked at how to:

  1. Install and setup Fastlane in a project
  2. Add a lane to build and distribute our Android version to Firebase App Distribution
  3. Install Firebase App Distribution plug-in
  4. Authenticate with Firebase
  5. Finally, build our App and distribute it to Firebase App Distribution

References:

Firebase Developers

Tutorials, deep-dives, and random musings from Firebase…

Firebase Developers

Tutorials, deep-dives, and random musings from Firebase developers all around the world. Views expressed are those of the authors and don’t necessarily reflect those of Firebase or its parent companies.

Victor Bruce-Crabbe

Written by

A Software Engineer who loves to share his knowledge through writing

Firebase Developers

Tutorials, deep-dives, and random musings from Firebase developers all around the world. Views expressed are those of the authors and don’t necessarily reflect those of Firebase or its parent companies.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store