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.
A QUICK SUMMARY – FOR THE BUSY ONES
TABLE OF CONTENTS
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:
As you can see, the above list consists of a large number of repeatable steps. Since they are repeatable, we can automate them, right?
There are several solutions for automating beta release version generation and delivering the app to the client.
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.
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.
Before you start building and deploying the app, you should prepare the environment. This section describes the steps you should take first.
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.
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.
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.
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.
Install Fastlane.
Init Fastlane.
The command above will create the fastlane directory in current directory with a file called Fastfile that contains the Fastlane configuration.
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.
Beta release Fastfile might look like this.
Let’s analyze our Fastfile step by step.
The code block below will be executed after typing fastlane ios beta into the console.
Similarly for Android – fastlane android beta.
Ensure that the current branch is master and perform git pull to sync with the remote repository.
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.
Testflight and Ad Hoc distribution require the proper certificate and provisioning profile. There are several methods of signing apps:
In this article, cert and sigh was used. For further reading about codesigning using Fastlane, visit this site.
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).
The last step regarding iOS is sending the app to Testflight.
Now let’s look at the Android version. There are two gradle steps: cleaning and building release version.
Now you can send the generated app to HockeyApp.
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.
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.
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.
Now you are ready to build and upload the app to HockeyApp and Testflight.
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.
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.
Do you remember the 9 repeatable steps from the beginning of this article? If not I’ll remind you:
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.
Our promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.
Authors
Full-stack software engineer with 8 years of professional experience. Graduate of The Silesian University of Technology.
Read next
Popular this month
Get smarter in engineering and leadership in less than 60 seconds.
Join 300+ founders and engineering leaders, and get a weekly newsletter that takes our CEO 5-6 hours to prepare.
previous article in this collection
It's the first one.
