How to properly automate React Native applications with Fastlane?

In this article, you will learn how to auto-generate an application written in React Native and send it to Firebase (Android) and Testflight (iOS) using Fastlane, and how to configure circleCi.

26 August 2022

If you've written React Native apps, you've probably noticed that the beta generation process takes a lot of repetitive steps, especially for cross-platform apps.

There are several solutions to automate the generation of beta versions. In this article, you will learn how to auto-generate a React Native application and send it to Firebase (Android) and Testflight (iOS) using Fastlane and how to configure CircleCi. Use this article as a tutorial, you'll find helpful instructions, but also notes, bug fixes, and sample configuration files.

Use this article as a tutorial, you'll find helpful instructions, but also notes, bug fixes, and sample configuration files. This article will help you add applications for testers of your choice and set up a React Native project with Fastlane and CircleCi to automate the testing process.

Fastlane + TestFlight


Fastlane was originally an iOS developer tool that helped manage certificates, sign and submit applications to the App Store. It is software that automates the entire process from compilation to implementation. Fastlane based on Ruby scripts, it works from the command line without interacting with the interface. It is also separate from CI and CI systems.

To use the rest of this manual, you must have an Apple Id and an Apple Developer Account.

In order to install fastlane, I recommend the following two articles that show you step by step how best to do it.

https://thecodingmachine.github.io/react-native-boilerplate/docs/BetaBuild/
https://medium.com/@danielvivek2006/setup-fastlane-match-for-ios-6260758a9a4e

The tricky part of going through this walkthrough might be understanding the idea - a fastlane match - of sharing a single identity for code signing with the entire development team to simplify co-design setup and prevent problems. Creates all required certificates and profiles (provisioning profile) and stores them in a separate git repository. Any team member with access to the repository can use these credentials to sign code. Fastlane match also automatically fixes damaged and expired certificates. It's the easiest way to share signing credentials between teams.

Possible problems:

1. Error: No profile for team '...' matching '...' found

Check team_id. If the team Id is declared in environment variables, it must be identical.

2. Missing Compliance status in TestFlight

The following should be added to the info.plist file:

https://stackoverflow.com/questions/35841117/missing-compliance-status-in-testflight

3. Fastlane match appstore: Exit status: 128: Couldn't commit or push changes back to git

You need to add the ssh key to your account, not to the certificate repository:

https://stackoverflow.com/questions/56718830/git-and-bitbucket-unauthorized-when-pushing

Fastlane + Firebase


Firebase allows you to install a test application for testers. In order to configure a Firebase with Fastlane, you must have a google account and set up a Firebase account. In order to install Firebase, I recommend the following article:

  1. You must have a service account key (google cloud platform): On this link you will find information on how to generate it:https://docs.fastlane.tools/getting-started/android/setup/

  2. Na platformie Google Could należy stworzyć projekt i w obrębie tego projektu nadać role:
    -Cloud Build Service Account
    -Firebase Admin SDK Administrator Service Agent
    -Firebase App Check Admin
    -Firebase App Distribution Admin
    -Service Account Token Creator

  3. You need to generate a json key (add Key):


Then add it to the folder: / android / fastlane / serviceAccountKey.
Remember! Add key to .gitignore.

.gitignore, among other files, should contain:

After completing the Firebase and Fastlane configuration, log in to the firebase console on the console: firebase login


Then create a firebase project (in the browser) https://console.firebase.google.com/?pli=1.


In the app adding panel you will find the AppID to be added to the environment variables.

Then in Release & Monitor → App distribution, add a group of testers and add the group id to the environment variables.

4. We add a task in the Fastfile:


Applications can be thrown from the console with the following command:
fastlane beta env:development

CircleCi

The general configuration of CircleCi can be found at the link below:https://circleci.com/blog/ci-for-react-apps/

ANDROID: CircleCi- Firebase - Fastlane
In the "Organization Settings" tab, add context (a mechanism for securing and sharing environment variables in projects) and add environment variables used in fastlane and config.yml files:

  • GROUPS
  • APP_ID
  • SERVICE_ACCOUNT_KEY_PATH
  • PACKAGE_NAME
  • GOOGLE_SERVICE_ACCOUNT (base64 service account key version - you need to change the type from json to base64)

Important! Comment in the build.gradle 'apply from ...' file.

IOS: CircleCi- testflight - fastlane

Adding SSH keys to CircleCI - connecting Crcleci with the repository containing certificates. It is best to generate a local ssh key, add a private key in CircleCi and add a public key in the bitbucket repository with certificates - as an access key.


The host environment variable to add in context CircleCi is bitbucket.org.

Important: You need to add environment variables in CircleCi - FASTLANE_USER, FASTLANE_PASSWORD. You can read more about good practices related to the selection of environmental variables at:
https://docs.fastlane.tools/best-practices/continuous-integration/

Wrzucanie aplikacji przez cirlceCi do TestFlight z użyciem konta, które ma włączoną weryfikację dwuetapową(2FA): upload_to_testflight()- trzeba dodać apple_idm, które znajdziesz w App Store Connect. Wtedy można skorzystać z FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD - hasła ustawionego w App Store Connect, które zastępuje konieczność podania kodu wysłanego na numer telefonu (do wygenerowania tutaj: https://appleid.apple.com/). Mimo, że mamy ustawione to hasło, to musimy też dodać skip_waiting_for_build_processing, żeby CircleCinie czekało na podanie kodu przysłanego na numer telefonu.


You can read more about uploading TestFlight with Fastlane and 2FA in the following articles:

https://dev.to/dumazy/upload-to-testflight-with-fastlane-and-2fa-11k8
https://discuss.circleci.com/t/apple-2fa-login-session-token-lasts-for-few-minutes-not-for-30-days-as-mentioned-in-circleci-documentation/32466/2

5. Additionally: To speed up building CircleCi using macOS VM, you can use Gen2 macos resources (you need a Performance plan):


CircleCi Environment Variables for Android and iOS:

  • APP_APPLE_ID
  • APP_ID
  • APPLE_ID
  • BUNDLE_ID
  • FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD
  • FASTLANE_PASSWORD
  • FASTLANE_USER
  • GIT_CERT_URL
  • GOOGLE_SERVICES_ACCOUNT
  • GROUPS
  • host
  • ITS_TEAM_ID
  • MATCH_USERNAME
  • SERVICE_ACCOUNT_KEY_PATH
  • PACKAGE_NAME
  • TEAM_ID

Sample config.yml for IOS and Android:

IMPORTANT: before each building of the application, you need to upgrade the application version in two places, change the value of 'APP_VERSION'

configCircleCi

To sum up

Proper testing can be even more important for mobile applications than for web applications. Requiring users to install updates to your app every time you fix a bug is an easy way to annoy them. More importantly, you automate the testing process and make sure that these bugs aren't passed to the production code in the first place.

Happy coding!