fastlane: Construct, take a look at, and ship React Native apps

React Native is among the hottest JavaScript-based frameworks for creating cellular purposes. It cuts down on the general complexity and time required for whole app improvement by enabling the creation of cross-platform apps that run on each iOS and Android.

However, in an effort to construct a React Native app and distribute it, the developer should first signal the certificates, compile and replace the model, after which submit the construct to the suitable platform App Retailer for iOS and Google Play for Android.

On this article, we’ll show the right way to leverage GitHub Actions and fastlane to automate these tedious duties.

This publish will enable you automate the construct, take a look at, and distribution of iOS and Android apps constructed with React Native.

Contents

What’s fastlane?

fastlane is an answer that helps iOS and Android builders automate time-consuming operations. This platform helps ship high-quality apps by means of steady deployment with out compromising the pace or agility of a developer’s every day work.

fastlane presents native Gradle (Android) and Xcode (iOS) plugins along with a Ruby command line utility. It manages duties like signing up for the App Retailer and Google Play, publishing apps to shops, deploying beta software program, Firebase Crashlytics, and extra. Any CI system you have already got will perform with fastlane as nicely.

Establishing fastlane

There are just a few system necessities that have to be put in domestically earlier than we begin.

fastlane is formally supported to run on macOS; Linux and Home windows are solely partially supported by fastlane as a result of instruments like Xcode solely work on macOS.

Fastlane may be put in with Homebrew for macOS:

brew set up fastlane

Or, with RubyGems for macOS, Linux, and Home windows:

sudo gem set up fastlane  # Be certain ruby is already put in

There are two methods so as to add fastlane to a React Native challenge:

1. Use the fastlane init command for Android and iOS individually of their respective folders; fastlane will mechanically detect the platform, request any vital info, and configure the platform
2. Create a fastlane folder on the root of the React Native challenge and add a Fastfile file to it. Then, manually configure it for iOS and Android

We’ll use the second method on this article.

Configuring fastlane for Android

Let’s begin by configuring fastlane for Android.

As beforehand talked about, we’ll create a fastlane folder on the challenge’s root and add a Fastfile file to the folder. We’ll use this identical Fastfile file for iOS and Android.

Earlier than doing the rest, let’s examine and clear up the Git department. We’ll arrange two lanes for Android distribution, one for beta testing and one for the ultimate launch.

First, we’ll outline an Android platform, like so:

platform :android do 
    desc "Launch for the Android beta"
    lane :beta do 
        increment_version_code('app_project_dir': './andriod/app')
        gradle(activity: 'clear', project_dir: './andriod')
        gradle(activity: 'bundle', bundle_type: 'Launch', project_dir: './andriod')
        provide(observe: 'beta', abb: './andriod/app/construct/outputs/apk/app-beta-release.apk')
    finish
    desc "Launch for the Android manufacturing"
    lane : launch do
        increment_version_code(app_project_dir: './android/app')
        increment_version_name(app_project_dir: './android/app', bump_type: 'patch')
        gradle(activity: 'clear', project_dir: './android/')
        gradle(activity: 'bundle', bundle_type: 'Launch', project_dir: './andriod', properties: {
            "android.injected.signing.retailer.file" => ENV['ANDROID_KEYSTORE_FILE'],
            "android.injected.signing.retailer.password" => ENV['ANDROID_KEYSTORE_PASSWORD'],
            "android.injected.signing.key.alias" => ENV['ANDROID_KEYSTORE_ALIAS'],
            "android.injected.signing.key.password" => ENV['ANDROID_KEYSTORE_PASSWORD']
        })
        provide(observe: 'manufacturing', aab: './android/app/construct/outputs/bundle/launch/app_release.aab', release_status: 'draft')
    finish
finish

Subsequent, we’ll create a distribution lane for the beta model and add a set of actions to be carried out.

We’ll make the most of Gradle to wash the construct within the subsequent step. Subsequent, we’ll execute the Gradle bundle to construct an APK or AAB.

As a closing step, we’ll submit the metadata, screenshot, binaries, and app bundle to Google Play utilizing the CI utility provide.

The Android app launch distribution lane can be created subsequent in the identical method because the beta lane; at this level, we’ll add the Keystore and Google credentials for launch.

N.B., fastlane’s provide device solely works when you have efficiently printed your Android app at the least as soon as to Google Play.

Configuring fastlane for iOS

Now, let’s configure fastlane for iOS. Earlier than we get began, Xcode and macOS are stipulations for the iOS app distribution with fastlane.

We’ll arrange two lanes for iOS distribution, one for TestFlight and one for App Retailer launch.

platform :ios do 
    private_lane :update_version do
        app_store_version = get_app_store_version_number(bundle_id: 'rnFastlane')
        plist_version = get_version_number_from_plist(xcodeproj: './ios/rnFastlane.xcodeproj')
        if Gem::Model.new(plist_version.to_f) == Gem::Model.new(app_store_version.to_f)
            increment_version_number_in_plist(xcodeproj: './ios/rnFastlane.xcodeproj', bump_type: 'minor')
        else
            increment_version_number_in_plist(xcodeproj: './ios/rnFastlane.xcodeproj', bump_type: 'patch')
        finish
    finish
    private_lane :testflight_build do 
        increment_build_number_in_plist(xcodeproj: './ios/rnFastlane.xcodeproj', goal: 'rnFastlane')
        fitness center(scheme: 'rnFastlane', workspace: './ios/rnFastlane.xcworkspace')
    finish
    private_lane :distribution_build do
        increment_build_number_in_plist(xcodeproj: './ios/rnFastlane.xcodeproj', goal: 'rnFastlane')
        create_keychain(
            identify: ENV['KEYCHAIN_NAME'],
            password: ENV['KEYCHAIN_PASSWORD'],
            default_keychain: true,
            unlock: true,
            timeout: 3600,
            add_to_search_list: true)

        match(
            sort: 'app-store',
            keychain_name: ENV["KEYCHAIN_NAME"],
            keychain_password: ENV["KEYCHAIN_PASSWORD"],
            readonly: true,
            shallow_clone: true,
            verbose: false)    
        fitness center(
            scheme: 'rnFastlane', 
            workspace: './ios/rnFastlane.xcworkspace',
            export_method: 'ad-hoc',
            output_directory: "./construct", 
            configuration: 'Launch',
            output_name: "rnFastlane.ipa"
            clear: true
            export_options: {
                technique: 'app-store',
                provisioningProfiles: {
                    'rnFastlane' => ENV["sigh_#{options[:app_identifier]}_app-store_profile-name"],
                }
            })
    finish
    desc "Launch for the iOS beta"
    lane :beta do
        testflight_build
        upload_to_testflight(username: ENV['APP_STORE_EMAIL'] app_identifier: 'rnFastlane')
        commit_version_bump(message: 'bump construct')
        push_to_git_remote
    finish
    desc "Launch for the iOS manufacturing"
    lane :launch do
        distribution_build
        ship
        commit_version_bump(message: 'bump construct')
        push_to_git_remote
    finish
finish

Increment the model quantity

The subsequent step is so as to add a non-public lane for the updating model.

We’ll use the
get_app_store_version_number and get_version_number_from_plist plugin technique to get the model from the App Retailer and plist file. This permits growing the model quantity for minor and patch bump sorts utilizing the increment_version_number_in_plist technique.

Arrange certificates and provisioning profiles

Now, we’ll use match to arrange certificates and provision information. match is included in fastlane for iOS apps, it’s used for code signing. With match, a complete improvement staff can use a single code signing identification.

Earlier than including match, we’ll have to create a non-public GitHub repository to retailer the certificates. Then, we are able to set up match with the next command:

fastlane match init 

Subsequent, we’ll want so as to add a non-public repo, as proven above, to retailer the certificates. A Matchfile is generated below the fastlane folder. As soon as the match setup is full, we are able to create certificates and profiles for improvement and for the App Retailer.

fastlane match appstore 
# for the appstore

fastlane match improvement
# for the event 

When the above command is executed, it’ll add the certificates to the non-public repo.

Construct the iOS app

One other fastlane function, fitness center, can be used to construct the iOS IPA app. fitness center will even assist automate the deployment and distribution of beta software program.

Add the construct

Now it’s time to add our construct. We’ll use the upload_to_testflight perform for the TestFlight add and ship for the App Retailer submission. The ship service is part of fastlane; it’s used to add metadata and IPA to the App Retailer.

Automating workflows with GitHub Actions

GitHub Actions is a new GitHub function that makes it simple to create and run workflows within the cloud. We’ll arrange the GitHub Actions to automate the construct and launch workflow for Android and iOS distributions.

First, we’ll add two separate workflows for iOS and Android. On the challenge’s root degree, we’ll create a .github folder; below this folder, we’ll create one other folder referred to as workflows. Then, we’ll add ios_release.yml for the iOS launch and android_release.yml for the Android launch to the .github > workflows folder.

mkdir .github && cd .github && mkdir workflows && cd workflows && contact andriod_release.yml && contact ios_release.yml

Defining GitHub Actions workflows

We’ll outline the GitHub Actions workflows, like so:

on:
  push:
    tags:
      - 'android*'

The construct for the Android launch will begin once we add a tag that features an android key phrase, as outlined above. Right here’s an instance:

git tag -a 'variations' -m "andriod launch"

Two jobs are outlined for the Android launch workflows, one for the beta launch and one for the Google Play launch.

Subsequent, we’ll outline the newest model of an Ubuntu digital machine to run the GitHub Actions workflows.

identify: Construct and deploy Android launch
on:
  push:
    tags:
      - 'android*'
jobs:
  testFlight-build:
    identify: android-beta-build
    runs-on: ubuntu-latest
    technique:
      matrix:
        node-version: [12.x]
    steps:
      - makes use of: actions/[email protected]
        with:
          node-version: ${{ matrix.node-version }}
      - identify: Checkout to git repository
        makes use of: actions/[email protected]
      - identify: Set up dependencies
        run: |
          yarn set up
      - identify: Set up Fastlane
        makes use of: actions/[email protected]
        with:
          ruby-version: 2.6
      - identify: Set up npm dependencies
        run: |
          yarn set up
      - identify: Set up Fastlane
        run: |
          bundle set up
          bundle replace fastlane
      - identify: Construct and add to TestFlight
        run: |
          bundle exec fastlane android beta
          env: 
             ANDROID_KEYSTORE_FILE: ${{ secrets and techniques.ANDROID_KEYSTORE_FILE }}
             ANDROID_KEYSTORE_PASSWORD: ${{ secrets and techniques.ANDROID_KEYSTORE_PASSWORD }}
             ANDROID_KEYSTORE_ALIAS: ${{ secrets and techniques.ANDROID_KEYSTORE_ALIAS }}
             ANDROID_KEYSTORE_PASSWORD: ${{ secrets and techniques.ANDROID_KEYSTORE_PASSWORD }}
  release-build:
    identify: Android-release-build
    runs-on: ubuntu-latest
    technique:
      matrix:
        node-version: [12.x]
    steps:
      - makes use of: actions/[email protected]
        with:
          node-version: ${{ matrix.node-version }}
      - identify: Checkout to git repository
        makes use of: actions/[email protected]
      - identify: Set up dependencies
        run: |
          yarn set up
      - identify: Set up Fastlane
        makes use of: actions/[email protected]
        with:
          ruby-version: 2.6
      - identify: Set up npm dependencies
        run: |
          yarn set up
      - identify: Set up Fastlane
        run: |
          bundle set up
          bundle replace fastlane
      - identify: release-build
        run: |
          bundle exec fastlane android launch
          env: 
             ANDROID_KEYSTORE_FILE: ${{ secrets and techniques.ANDROID_KEYSTORE_FILE }}
             ANDROID_KEYSTORE_PASSWORD: ${{ secrets and techniques.ANDROID_KEYSTORE_PASSWORD }}
             ANDROID_KEYSTORE_ALIAS: ${{ secrets and techniques.ANDROID_KEYSTORE_ALIAS }}
             ANDROID_KEYSTORE_PASSWORD: ${{ secrets and techniques.ANDROID_KEYSTORE_PASSWORD }}

Within the above code, we outline a sequence of the steps, that are the predefined actions supplied by both the GitHub market or supported by the group.

We add the steps for putting in the npm dependencies, including the required Node.js model, and putting in fastlane within the subsequent sequence of occasions as proven within the above code.

Lastly, we run the fastlane construct for the beta and launch jobs. We additionally use GitHub Actions Secrets and techniques to outline the setting variable required throughout the construct workflow.

Creating and storing secrets and techniques for Github Actions

Encrypted secrets and techniques enable us to retailer delicate info. We will add the environment variables, key, and passwords to the GitHub repo as encrypted secrets and techniques. The repository’s secrets and techniques can be accessible to any workflows which can be put up on the repo.

So as to add the secrets and techniques, go to the repo’s Settings menu. Below the Secrets and techniques > Actions part (left nav), click on the New repository secret button (prime proper) so as to add the brand new secret.

Including secrets and techniques for Android and iOS apps is required all through the process to appropriately signal your app earlier than add.

Defining iOS workflows

As beforehand talked about, we’re separating the iOS and Android launch by creating a definite ios launch.yml file below the .github > workflows folder. The construct for the iOS launch will begin once we add a tag that features ios key phrases.

Right here’s an instance:

git tag -a 'variations' -m "ios launch"

For the iOS launch, we’ll specify two jobs: one for the TestFlight launch and one for the App Retailer launch.

Subsequent, we’ll outline the newest model of macos-latest digital machine to run the GitHub Actions workflows for the iOS distributions.

identify: Construct and deploy iOS launch
on:
  push:
    tags:
      - 'ios*'
jobs:
  testFlight-build:
    identify: iOS-testFlight-build
    runs-on: macos-latest
    technique:
      matrix:
        node-version: [12.x]
    steps:
      - makes use of: actions/[email protected]
        with:
          node-version: ${{ matrix.node-version }}
      - identify: Checkout to git repository
        makes use of: actions/[email protected]
      - identify: Set up dependencies
        run: |
          yarn set up
      - identify: Set up Fastlane
        makes use of: actions/[email protected]
        with:
          ruby-version: 2.6
      - identify: Set up npm dependencies
        run: |
          yarn set up
      - identify: Set up Fastlane
        run: |
          bundle set up
          bundle replace fastlane
      - identify: Construct and add to TestFlight
        run: |
          bundle exec fastlane ios beta
          env: 
             APPLE_ID: ${{ secrets and techniques.APPLE_ID }}
             APP_STORE_EMAIL: ${{ secrets and techniques.APP_STORE_EMAIL }}
             APPLE_TEAM_ID: ${{ secrets and techniques.APPLE_TEAM_ID }}
             IOS_DISTRIBUTION_CERTS_GITHUB_URL: ${{ secrets and techniques.IOS_DISTRIBUTION_CERTS_GITHUB_URL }}
             MATCH_PASSWORD: ${{ secrets and techniques.MATCH_PASSWORD }}
  release-build:
    identify: iOS-testFlight-build
    runs-on: macos-latest
    technique:
      matrix:
        node-version: [12.x]
    steps:
      - makes use of: actions/[email protected]
        with:
          node-version: ${{ matrix.node-version }}
      - identify: Checkout to git repository
        makes use of: actions/[email protected]
      - identify: Set up dependencies
        run: |
          yarn set up
      - identify: Set up Fastlane
        makes use of: actions/[email protected]
        with:
          ruby-version: 2.6
      - identify: Set up npm dependencies
        run: |
          yarn set up
      - identify: Set up Fastlane
        run: |
          bundle set up
          bundle replace fastlane
      - identify: Construct and add to TestFlight
        run: |
          bundle exec fastlane ios beta
          env: 
             APPLE_ID: ${{ secrets and techniques.APPLE_ID }}
             APP_STORE_EMAIL: ${{ secrets and techniques.APP_STORE_EMAIL }}
             APPLE_TEAM_ID: ${{ secrets and techniques.APPLE_TEAM_ID }}
             IOS_DISTRIBUTION_CERTS_GITHUB_URL: ${{ secrets and techniques.IOS_DISTRIBUTION_CERTS_GITHUB_URL }}
             MATCH_PASSWORD: ${{ secrets and techniques.MATCH_PASSWORD }}

Now, we outline a sequence of steps for putting in the npm dependencies, including the required Node.js model, and putting in fastlane within the subsequent sequence of occasions as proven within the above code.

Lastly, we run the fastlane construct for the TestFlight launch. We use GitHub Actions Secrets and techniques to outline the setting variable required throughout the construct workflow.

Conclusion

On this article, we demonstrated the right way to arrange fastlane in React Native initiatives. Utilizing fastlane and GitHub Actions collectively simplifies the construct and launch for iOS and Android apps and improves the deploy pipeline for construct, take a look at, and launch distributions.

Consult with the official docs to study extra about fastlane and GitHub Actions.