CI/CD for Classic React-Native Apps

We, at Diophant Technologies, firmly believe that a CI/CD pipeline stabilizes and simplifies development. It forces standardization of the development environment, uncovers common problems such as developers forgetting to add new files to the branch before commits changes, and otherwise helps to guard against regressions creeping into production.

There are several Continuous Integration platforms suitable for React-Native apps, including CircleCI, Microsoft App Center, Microsoft Azure Pipelines, Bitrise, and others. Additionally, "managed" React Native apps made with Expo can be built using Bitbucket Pipelines.

Normally, setting up a mobile CI pipeline is a relatively trivial task. Depending on the exact version of Classic React-Native and the way that the project files were produced, however, there are several possible annoyances that might take time to resolve. We will cover the configuration of complete build pipelines for Classic React-Native apps for running builds on Bitrise for anyone looking for options to jumpstart their mobile DevOps.

What pipelines to run?

Depending on the type of the trigger, you may want to run different pipelines, depending on the situation. For example, you may want to run JavaScript/Jest tests for every commit, while to build the complete binaries/artifacts only on pull requests and changes to the master branch. If you are new to DevOps, look online and visit our DevOps blog for best practices and practical DevOps/DevSecOps advice. In this article, we will cover the complete build process since partial builds could be made by removing unnecessary steps from a full build.

While it is possible to build both Android and iOS binaries in the same pipeline, we recommend splitting platforms into two separate pipelines.

iOS Pipeline

Let’s start by creating a new React-Native pipeline using Bitrise wizard. We click ‘Add new app’, choose the Bitrise account, privacy, connect the code repository and go through the entire process, including the webhook setup.

We now have a vanilla pipeline. View the pipeline Bitrise created from the Workflow tab.
The React-Native template vanilla pipeline includes configurations for both iOS and Android, yet does not actually build binaries.

We will directly edit the bitrise.yml file to include the steps that we need. Under workflows section, let find our pipeline name. Below that will be the steps. Let’s replace the steps section with:

steps:
- nvm@1.2.1:
inputs:
- node_version: 8.12.0
- activate-ssh-key@4.0.3:
run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
- git-clone@4.0.11: {}
- npm@0.9.1:
inputs:
- command: install
- npm@0.9.1:
inputs:
- command: test
- install-react-native@0.9.1: {}
- deploy-to-bitrise-io@1.3.15: {}
- ios-auto-provision@1.2.0:
inputs:
- team_id: $DIOPHANT_TEAM_ID
- scheme: $BITRISE_SCHEME
- distribution_type: app-store
- set-xcode-build-number@1.0.5:
inputs:
- plist_path: "$BITRISE_SOURCE_DIR/ios/$BITRISE_SCHEME/Info.plist"
- build_version_offset: '0'
- build_short_version_string: '1.0'
- xcode-archive@2.4.15:
inputs:
- export_method: app-store
- project_path: "$BITRISE_PROJECT_PATH"
- team_id: $DIOPHANT_TEAM_ID
- xcodebuild_options: "-UseModernBuildSystem=0"
- scheme: "$BITRISE_SCHEME"
- deploy-to-itunesconnect-application-loader@0.9.4:
inputs:
- itunescon_user: "$AppId"
- password: "$ApplePwd"
- app_password: "$AppSpecPwd"

An awesome thing about Bitrise is that configuration changes made in YAML are immediately reflected in the configuration wizard and vice versa.

Click on the Workflows tab to view the visualization of our CI workflow.

Workflow editor

We added several steps to the build pipeline. The NVM step tells Bitrise to use a specific Node.JS version. We added steps to: setup React Native CLI, autoprovision iOS profiles, automatically set iOS build number so there are no conflicts, and after Xcode archive, we upload the build artifact – release binary to iTunes.

The last step is to configure environmental variables and setup autoprovisioning so all our steps will work.

Android Pipeline

We again by adding a new app and having Bitrise create a vanilla React Native pipeline for us, then edit YAML as below:

steps:
- activate-ssh-key@4.0.3:
run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
- git-clone@4.0.11: {}
- nvm@1.2.2:
inputs:
- node_version: 8.12.0
- npm@0.9.1:
inputs:
- command: install
- npm@0.9.1:
inputs:
- command: test
- script@1.1.5:
inputs:
- content: |-
#!/usr/bin/env bash
# fail if any commands fails
set -e
# debug log
set -x

# write your script here
npm install -g react-native-cli
- install-missing-android-tools@2.3.2:
inputs:
- gradlew_path: "./android/gradlew"
- file-downloader@1.0.1:
inputs:
- destination: "/Users/vagrant/keystores/my-cert.jks"
- source: "$BITRISEIO_ANDROID_KEYSTORE_URL"
- react-native-bundle@1.0.3:
inputs:
- platform: android
- out: "./android/app/src/main/assets/index.android.bundle"
- dev: 'false'
- entry_file: index.js
- assetRoots: "$BITRISE_SOURCE_DIR/android/app/src/main/res/"
- script@1.1.5:
inputs:
- content: |-
#!/usr/bin/env bash
# fail if any commands fails
set -e
# debug log
set -x

# write your script here
rm -rf ./android/app/src/main/res/raw
rm -rf ./android/app/src/main/res/drawable-*
./android/gradlew --build-file ./android/build.gradle clean
- set-android-manifest-versions@1.0.5:
inputs:
- manifest_file: "$BITRISE_SOURCE_DIR/android/app/src/main/AndroidManifest.xml"
- version_code_offset: '0'
- version_name: 1.0.0
- gradle-runner@1.8.3:
inputs:
- gradle_task: assembleRelease
- gradle_file: "./android/build.gradle"
- gradlew_path: "./android/gradlew"
- deploy-to-bitrise-io@1.3.15: {}

Android pipeline is similar to iOS, except since Android apps could be installed by clicking a link, we did not have to push artifacts to Google Play.

Conclusion

Bitrise is one of several SaaS options for automating mobile app builds. The developer plan costs $40 per month, and will allow builds for pipeline to run up to 40 minutes before cancelling out. For us, 40 minutes is more than sufficient to build both React Native Android and iOS artifacts, even if both artifacts are included in the same pipeline.
We, however, recommend separate pipelines for iOS and Android.

While there are alternatives to Bitrise, starting with Microsoft AppCenter and Azure Pipelines, Bitrise in our opinion is worth a consideration. Things that make Bitrise stand-out are the Bitrise build tools extremely useful for some of the tricky tasks such as iOS profile provisioning, and the Bitrise knowledgeable and responsive customer service second to none.

More from our blog

See all posts