Karan Pratap Singh

Posted on Mar 28, 2020 • Updated on Aug 5, 2021

Continuous Integration and Deployment with React Native using App Center

#javascript #reactnative #devops

Greeting React Native Community, in this article I will be helping you with setting up continuous integration and deployment using Microsoft App Center which is very easy to setup, however, might be confusing for new users.

What is continuous integration and deployment anyways?

Continuous integration is a coding philosophy and set of practices that drive development teams to implement small changes and check-in code to version control repositories frequently.

Continuous deployment/delivery picks up after continuous integration. CD automates the delivery of applications to selected infrastructures (like Play Store and App Store in our case). Most teams work with multiple environments other than the production, such as development and testing environments, and CD ensures there is an automated way to push code changes to them.

You can read more about CI/CD here

This is interesting but how does it benefit me?

If you're an experienced developer you already know the benefits, but in case you're a React Native developer just getting started then it is a great way to setup automatic builds and also ensuring smooth delivery to the App Store/Play Store.

The main advantage is that it saves a lot of manual build time on a developer's machine and especially if you work in a team with different machines/environments then it's better to do automatic builds and if they fail then it is easier to debug as there are less external factors versions which might be the case with different developer machines in a team.

Last but not the least, It's a great thing to know in general from an engineering perspective.

Let's get started 🚀

Let us start by setting up our first build with App Center, for this, We will be following by example of one of my app Proximity

Navigate to Microsoft's App Center and sign in with your account.

This is the main dashboard we'll be working with, But right now we don't see anything. Let's add a new app.

Now you will be prompted with app details and platform setup. Select iOS or Android with the platform as React Native . After that click Add new app

Now you will be directed to your new app's overview. On the left click on Build to start setting up the build.

Here we have to link our repository with the app we created. We are presented with a bunch of options. Let's go with Github since my repository is on Github.

You will be prompted with Github login, after that you should be able to search and add your repository.

After a successful connection with a repository, you should be able to see all the active branches. Now let us start setting up the development branch.

This is the build configuration prompt, here we can select different config options we would like to use.

As this is a setup for an iOS application, we should also see additional options like Scheme and XCode version, we can leave these as default for now.

There's is also an option to set up Build Scripts . They help us execute custom scripts in different phases of our build process.
For example, I have a Pre-build setup which helps me to jetify my node_modules if there's an androidx issue and update my config for production release.

#!/usr/bin/env bash
#Jetify
node node_modules/jetifier/bin/jetify

# Update config
mkdir app/config
echo "$APP_CONFIG" | base64 --decode > app/config/index.ts

You can read about Build Scripts in detail here

We can now also control how often we want to build our branch. For instance, in larger teams, you might want to run build for every commit.

Scrolling down, we see additional config. Build numbers can also be incremented automatically which might save additional time.

Environment variables are extremely helpful when working with tokens and secrets which only certain members of the team should have access to or you want your custom Build Script to have access to.

For example: swapping your development config with production config.

Signing Build is the most essential feature of any CI/CD. Here we can see how this differs for iOS and Android .

On iOS we need to add our provisioning profile along with certificates. You can checkout this guide for generating certificates.

On Android we just need our Keystore file along with its credentials.
You can checkout this guide for generating a Keystore file

With build signing in place, let us now move to continuous deployment/delivery. Build distribution helps us upload our built binaries *.apk or *.ipa to beta testers using Groups or to the respective stores directly by using Stores . Start by clicking on Connect to Stores

Note: We can also skip distribution if we just want to quickly build and test our *.apk or *.ipa

Here depending on your platform you selected earlier you should see Google Play or App Store Connect . You can follow this simple wizard and authenticate your account. Then App Center should handle the rest.

With our build configuration complete. Let's head back to build overview where now we can also clone configuration from different branches without having to go through the setup again. This is especially helpful for larger teams working with multiple branches.

Now to the moment of truth. Let's kick off our first build 🔥

Okay building... building... building. Typically it takes 6 minutes for Android and 10 minutes for iOS

Yay 🎉 our build was a success. It should be available on App Store Connect or Google Play Console shortly after being processed. You can also download build directly after the build has completed as shown below.

Well, this was all about setting up CI/CD with App Center. However App Center has tons of great features like Analytics, Test Runs, Diagnostics, Push Notification, Crash Reportingand most importantly Codepush which is a game-changer for app distributions.

Hopefully, now you have a better understanding of CI/CD and were able to setup your build with App Center.

If you liked this article, or faced any issues, feel free to reach out via Twitter or Email 🚀

Happy Coding 🎉