How to Deliver a React Native App to the Client

The generation of a beta-release version of a React Native app requires many repeatable steps to be taken. Learn how to automate them along with the market distribution process.

readtime

TL;DR

Introduction

If you have written some React Native apps, you’ve probably noticed that the process of beta-release version generation requires many repeatable steps to be taken, especially for multiplatform apps.

Let’s look at sample action steps you need to perform to deliver the beta version app to the client or tester:

  1. Download the proper branch from the repository
    Android:
  2. Insert APK signing key into the ./android/app/ directory
  3. Build the release version
  4. Send the app, e.g. via e-mail
    iOS:
  5. Launch Xcode
  6. Change the scheme to Release
  7. Change the jsCodeLocation value to a static main.jsbundle file path
  8. Archive
  9. Upload the app to TestFlight

As you can see, the above list consists of a large number of repeatable steps. Since they are repeatable, we can automate them, right?

Possible solutions

There are several solutions for automating beta release version generation and delivering the app to the client.

Visual Studio App Center

The first solution that came to our minds at Brainhub was the use of the Visual Studio App Center. A project built by Microsoft seems to be really attractive – apart from building the app in the cloud (free 240 minutes / month of building), distribution among testers and the client, it also provides a platform for testing apps on many real devices, giving access to reports and screenshots of every step of the process.

However, it quickly turned out that this is not the appropriate solution for our project. VS App Center has limited configuration abilities and the app’s code needs to be downloaded from git repository hosted on GitHub, Bitbucket or VSTS. Due to the fact that we use GitLab, we had to rule out this solution.

HockeyApp and Fastlane

The next option was to use HockeyApp – a tool for app distribution, collecting crash reports and users’ feedback. The service was initially created for distribution of iOS apps using the ‘ad hoc’ method (outside of App Store), but currently it works for Android also.

HockeyApp works well as a delivery platform of software testing versions but does not give the functionality of building the app. However, we can use Fastlane – a tool for mobile app building process automation built by fabric.io.

Preparations

Before you start building and deploying the app, you should prepare the environment. This section describes the steps you should take first.

Automatic jsCodeLocation change

React Native documentation says that you should change jsCodeLocation to static js bundle for the iOS release version in AppDelegate.m file. But there’s no need to do that manually every time you release the app – you can use #ifdef DEBUG macro to do it automatically. Just replace the line containing jsCodeLocation = … with the following code.

How to deliver a React Native app to the client tutorial — Step 1.

Ignore helper files

During the process of building the app, there will be some helper files created. There’s no need to commit them to the repository, so just add them to the following to .gitignore file.

How to deliver a React Native app to the client tutorial — Step 2.

APK signing key

To release an Android, app you need a signing key. To learn more about this process, look here.

When you have your key generated, move it to the android/app directory and remember to add *.keystore to .gitignore.

Fastlane + HockeyApp + Testflight

In this section, you will learn how to automatically generate an app written in React Native for Android and iOS platforms and send it to HockeyApp (Android) and Testflight (iOS).

First, let’s install Fastlane. Make sure you have the newest version of Xcode command line tools installed.

How to deliver a React Native app to the client tutorial — Step 3.

Install Fastlane.

How to deliver a React Native app to the client tutorial — Step How to deliver a React Native app to the client tutorial — Step 4.

Init Fastlane.

How to deliver a React Native app to the client tutorial — Step 5.

The command above will create the fastlane directory in current directory with a file called Fastfile that contains the Fastlane configuration.

Appfile

In the fastlane directory, create a file called Appfile, which stores data that is used across all fastlane tools, e.g. AppleID. It is required for the iOS build and deployment to Testflight.

Add your AppleID to the Appfile.

How to deliver a React Native app to the client tutorial — Step 6.

Fastfile

Beta release Fastfile might look like this.

How to deliver a React Native app to the client tutorial — Step 7.

Let’s analyze our Fastfile step by step.

The code block below will be executed after typing fastlane ios beta into the console.

How to deliver a React Native app to the client tutorial — Step 8.

Similarly for Android – fastlane android beta.

How to deliver a React Native app to the client tutorial — Step 9.

Ensure that the current branch is master and perform git pull to sync with the remote repository.

How to deliver a React Native app to the client tutorial — Step 10.

Let’s increment the build number (works for iOS only). The application that is being sent to Testflight has to have a higher build number than the previous version.

How to deliver a React Native app to the client tutorial — Step 11.

Testflight and Ad Hoc distribution require the proper certificate and provisioning profile. There are several methods of signing apps:

  • match,
  • cert and sigh,
  • Xcode’s code signing feature,
  • manually.

In this article, cert and sigh was used. For further reading about codesigning using Fastlane, visit this site.

How to deliver a React Native app to the client tutorial — Step 12.

Next, there is the step of building the iOS version where we pass the params such as project path, scheme and export_method (one of the following values: app-store, ad-hoc, package, enterprise, development, developer-id).

How to deliver a React Native app to the client tutorial — Step 13.

The last step regarding iOS is sending the app to Testflight.

How to deliver a React Native app to the client tutorial — Step 14.

Now let’s look at the Android version. There are two gradle steps: cleaning and building release version.

How to deliver a React Native app to the client tutorial — Step 15.

Now you can send the generated app to HockeyApp.

How to deliver a React Native app to the client tutorial — Step 16.

It is worth mentioning that even if you forget to add some parameter or do it intentionally, e.g. no iTunes Connect user in Fastfile Fastlane will ask you for that data in the console.

HockeyApp configuration

After signing up and signing in to HockeyApp, you will see the blue “New App” button.

After pressing that button, you will see a dialog box. Choose “Create the app manually instead” option.

On the next screen, you can add application data such as “CFBundleIdentifier” from the Info.plist file for iOS and “package” from AndroidManifest.xml for Android. Based on this value, HockeyApp will connect the uploaded app with the app that you are now creating in the HockeyApp.

After saving the data, HockeyApp will show you the application screen. You can invite users to test the app from there. After accepting the invitation, they will get notifications about every new version of the app.

Let’s navigate to the user settings to generate the token that is needed for sending apps with Fastlane.

Paste the token to Fastfile.

How to deliver a React Native app to the client tutorial — Step 17.

Testflight configuration

After signing up and signing in to iTunes Connect, you have to create a new application. Choose one of the certificates that you are using to sign the app in the Bundle ID field. If you don’t have the click Register a new bundle Id on the Developer label, create a certificate and choose it in the Bundle ID field.

Create App Store and Ad Hoc certificate.

Running the script

Now you are ready to build and upload the app to HockeyApp and Testflight.

How to deliver a React Native app to the client tutorial — Step 18.

If you are getting the error:

<span class="colorbox1" fs-test-element="box1"><p>[Transporter Error Output]: Could not start delivery: all transports failed diagnostics</p></span>

it means that your computer is behind the firewall that blocks ports required by Aspera or Signiant protocols used by iTunes Connect Transporter.

In that case, you should use the DAV protocol which is an extension of HTTP. To do that, add the following flag before the following command.

How to deliver a React Native app to the client tutorial — Step 19.

After executing the command, Fastlane will inform you about steps that are being performed.

In the steps get_certificates, get_provisioning_profile, pilot, you will be asked for your AppleID if you haven’t pasted it into the Appfile.

After successful Testflight submission, Fastlane will build and send the Android version to HockeyApp.

Summary

Do you remember the 9 repeatable steps from the beginning of this article? If not I’ll remind you:

  1. Download the proper branch from the repository
    Android:
  2. Insert APK signing key into the ./android/app/ directory
  3. Build the release version
  4. Send the app, e.g. via e-mail
    iOS:
  5. Launch Xcode
  6. Change the scheme to Release
  7. Change the jsCodeLocation value to a static main.jsbundle file path
  8. Archive
  9. Upload the app to TestFlight

After completing this tutorial, the only step you have to perform is running Fastlane.

There are several tools for the automation of React Native app generation and distribution process on the market. If you don’t need to build the app in the cloud and want to have the whole process under your control, Fastlane with services like HockeyApp, Crashlytics, Google Play, Testflight, etc., should help you achieve that.

Tomasz Pierzchała
github
Full Stack Developer

Read next

No items found...

Get actionable product building tactics in your mailbox, monthly.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
brainhub rates and rerences

Bye, waterfall. Hello, BizDevOps.

Join 1,200+ other tech leaders and get monthly insights on how to:

  • build superior products that users love
  • release software fast, often, and within budget
  • avoid tension between product and engineering teams
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By submitting, you agree to receive our BizDevOps newsletter.