Continuous Integration and Continuous Delivery (CI/CD) with Bitrise in React Native

Mukesh Jangid
Dec 4, 2019 · 7 min read

Being a tech enthusiast and a lazy mobile developer, I always want things to be automated. I believe the same when it comes to deploying applications to Google Play, Apple Store or any other platform. If we talk about iOS build, one has to archive the build, and then has to push the build to Appstore connect. And if we talk about Android, one has to generate a release build and sign it, and then have to upload it to Google Play. This task becomes more time consuming for cross-platform developers. Moreover, we need to follow these same steps for every build release.

As a way to make the build release process faster and hassle-free, we have implemented CI/CD with Bitrise for our React Native projects at Simform.

What Bitrise can do for us?

Bitrise gives us the power to release our build in one click. Yes, you read it correctly, with just one click you will have your release build.

  • Release and deploy a build with just one click
  • Auto trigger a build when code gets merged to the specified branch
  • Schedule a build to release and deploy
  • Notify the status of the build process
  • And many more!

Setup workflows at Bitrise and trigger a build to deploy automatically to the app store as well as to play store.

Bitrise integration in react native is similar to the native iOS and Android CI/CD integration except for a few steps that I’m going to cover below.

Bitrise CI/CD is completely independent of our local system as it runs on its own stack and configurations.

What we’re going to do is that we’ll define a set of tasks/flows and instruct Bitrise to execute them sequentially. As Bitrise is doing the same with a selected workflow to release build. It’s confusing about the next steps?

We will be going to create two different apps here, one for the Android releases and other one for the iOS releases. This approach will help us to debug and maintain both the platforms easily.

Let’s start from the beginning:

Login to Bitrise dashboard and create a new app with the help of following steps:

  1. Choose “Add New App” button from the top right corner and create a new app
  2. Choose an account and set the privacy of the app private or public

3. Connect repository with SSH or HTTPS

4. In case of SSH, add ssh key generated by Bitrise to your account

5. Choose a branch — develop/master/feature

6. Now let’s Bitrise to validate your repository

7. Add project build configurations

8. Add an App icon

9. Scroll to the top and click on finish

That’s it now it’s automatically triggered the first build. We need to abort it because it will be going to fail, as we don’t have a proper workflow setup.

React Native Android CI/CD with Bitrise:

To release an apk or an Android app bundle to play store we need to add the following workflow steps:

  • Active SSH key (default): No need to update anything in it
Active SSH key
  • Git clone repository (Default): No need to update anything in it
  • Run npm command: Add command ‘npm install’
  • Install react-native: Define the version of ‘react-native-cli’
  • Install missing Android SDK: Add gradlew file path
  • File downloader: Download Keystore file, make sure you’ve uploaded Keystore file in code signing. Let’s hold and complete below step first 🤔
  • Upload Keystore file: open code signing tab in the workflow editor and upload the Keystore file.
  • Continue — File downloader:
  • Gradle runner: Define Gradle file path and add a Gradle task to run eg. assembleRelease
  • Android Sign: It automatically detects all the information based on the configuration so leave it as it is
  • Deploy to play store: Generate service account’s JSON key file and upload it to the code signing and define a path to same here and enter a package name
  • Link your API Project by Creating a new API project or Using an existing API project.
  • Set Up API Access Clients Using a service account and do not forget to download the service account’s JSON key.
  • Grant Release manager role to the Service Account.
  • Make sure you have selected a suitable stack for Android before schedule/run a build

That’s it for Android. Now trigger a build and deploy APK/Bundle to play store.

React Native iOS CI/CD with Bitrise:

Create a new app for the iOS build, select a suitable stack and follow the following steps to set up a complete workflow.

  • Active SSH key (default): same as described in the above steps
  • Git clone repository (default ): same as described in the above steps
  • Run npm command: same as described in the above steps
  • Install react-native: same as described in the above steps
  • Run CocoaPods install: This step will detect cocoa pods version from the podfile and install dependencies accordingly
  • iOS Auto Provision: Make sure you’ve uploaded certificates in code signing. Let’s hold and complete below step first 🤔
  • Uploaded certificates: open code signing tab in the workflow editor and upload certificates.
  • Connect your apple account directly with Bitrise: click on user icon and open account settings, check with the ‘connected account’ section and connect your apple account.
  • Connected apple developer account with your Bitrise app: open teams tab in your app’s Bitrise dashboard and scroll to the ‘Connected Apple Developer Portal Account’ section. select a user for whom you already added an apple developer account.
  • Continue — iOS Auto Provision:
  • Xcode achieve & Export for iOS: Update configuration name as Release
  • Deploy to iTunes connect: Generate or use an existing application-specific password to deploy IPA to iTunes connect

Now start a build, select a workflow and a branch it will automatically deploy your IPA to iTunes connect.

Yeah👏 That’s it we’ve done CI/CD with Bitrise in react-native. Let’s configure the same in any React Native project and speed up the development process.

Happy deployment 😊 !!!

Do you think this tutorial will be of help to someone? Do not hesitate to share. If you are already using Bitrise, leave a comment describing your experience in implementing it for continuous integration.

Simform Engineering

Our Engineering blog gives an inside look at our technologies from the perspective of our engineers.

Thanks to Ravi Rupareliya

Mukesh Jangid

Written by

Software Engineer | JavaScript Enthusiast | Mean Stack | React Native ( iOS | Android )

Simform Engineering

Our Engineering blog gives an inside look at our technologies from the perspective of our engineers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade