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, müssen Sie eine neue Anwendung erstellen. Wählen Sie eines der Zertifikate, mit denen Sie die App signieren, in der Paket-ID Feld. Wenn Sie den Klick nicht haben Registriere eine neue Bundle-ID auf dem Developer beschriften, ein Zertifikat erstellen und es in der Paket-ID Feld.
Erstellen App Store und Ad Hoc Zertifikat.
Jetzt können Sie die App erstellen und auf HockeyApp und Testflight hochladen.
Wenn Sie den Fehler erhalten:
<span class="colorbox1" fs-test-element="box1"><p>[Transporter-Fehlerausgabe]: Lieferung konnte nicht gestartet werden: Alle Transporte haben die Diagnose nicht bestanden</p></span>
Dies bedeutet, dass sich Ihr Computer hinter der Firewall befindet, die Ports blockiert, die für die von iTunes Connect Transporter verwendeten Aspera- oder Signiant-Protokolle erforderlich sind.
In diesem Fall sollten Sie das DAV-Protokoll verwenden, das eine Erweiterung von HTTP ist. Fügen Sie dazu das folgende Flag vor dem folgenden Befehl hinzu.
Nach der Ausführung des Befehls informiert Fastlane Sie über die Schritte, die gerade ausgeführt werden.
In den Schritten get_certificates, get_provisioning_profile, pilot, du wirst nach deiner AppleID gefragt, falls du sie nicht in das Appfile eingefügt hast.
Nach erfolgreicher Einreichung des Testflugs erstellt Fastlane die Android-Version und sendet sie an HockeyApp.
Erinnerst du dich an die 9 wiederholbaren Schritte vom Anfang dieses Artikels? Wenn nicht, erinnere ich dich daran:
Nach Abschluss dieses Tutorials müssen Sie nur noch Fastlane ausführen.
Es gibt mehrere Tools für die Automatisierung des Generierungs- und Vertriebsprozesses von React Native-Apps auf dem Markt. Wenn Sie die App nicht in der Cloud erstellen müssen und den gesamten Prozess unter Ihrer Kontrolle haben möchten, sollte Ihnen Fastlane mit Diensten wie HockeyApp, Crashlytics, Google Play, Testflight usw. dabei helfen, dies zu erreichen.
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-Softwareingenieur mit 8 Jahren Berufserfahrung. Absolvent der Schlesischen Technischen Universität.
Full-Stack-Softwareingenieur mit 8 Jahren Berufserfahrung. Absolvent der Schlesischen Technischen Universität.
Read next
Popular this month
previous article in this collection
It's the first one.
