Setup Continuous Integration with React Native

Learn to Use Visual Studio App Center to Automatically Build and Distribute Your React Native App

If you’ve worked on production web projects in the past you likely have experience with continuous integration. Push to the staging branch and it automatically goes to the staging server!

But what about for the React Native project? If you’re anything like me you’ve probably just done it all by hand — you don’t release that often anyways, right? But by setting up a CI system you can ship updates more often and with less (zero) effort on your part.

To do this we’ll be using Visual Studio App Center. It’s a tool developed by Microsoft that does a host of things. Today we’ll be setting up a build and distribution process.

Getting Started

App Center’s magic happens via your source control (you can use GitHub, Bitbucket or VSTS) so I’m going to sign up with GitHub.

Then in the top right corner I’m going to create a new organization. I just like to keep things separate from my personal account from the start.

I’ll be using a Currency Converter app, from my course teaching you to take your React Native app to production, as an example throughout. The app was built with Create React Native App but was then ejected. You’ll need to use a standard React Native app for this.

I’ll create separate apps for iOS and Android.

You’ll see some instructions on how to configure the SDK but we won’t be using any of the services that require that so we’ll skip it.

Configuring Build

In the left drawer I’ll choose the “Build” tab, connect to GitHub, and then find the right repo.

You’ll then want to choose whichever branch App Center should watch. I’m using staging.

Now comes the more complex side of things (though still pretty easy). iOS and Android differ slightly so I’ll break up the sections.

iOS Build Configuration

Let’s first walk through the initial, simple, setup.

Assuming your project is pretty straightforward App Center should pick up your package.json and the right scheme. I don’t have any build scripts so I’ll skip that, I’ll keep the default of “Build this branch on every push”, and will turn on “Automatically increment build number”.

Now, if you want to run the build on a device (which I’m assuming you do), you’ll have to sign the build.

To do that you’ll need the provisioning file (.mobileprovision) and a certificate (.p12 file). I use Fastlane to make the generation and management of all this super easy (something I cover extensively in my course).

If you’re reading about configuring CI I’m going to assume you’ve already set these things up.

I ran into some issue here because I used an app store distribution profile at first, which didn’t allow me to install the build. I switched to an Adhoc provisioning profile and it worked.

Thoughts on this? Let me know!

You can download the .moileprovision from the “Provisioning Profile” tab on developer.apple.com and can create a .p12 by downloading a certificate (again from Apple) and following these instructions to get a .p12 out of it.

That should be all we have to do! Let’s configure Android now…

Android Build Configuration

Initial setup is simple

The only thing I change from the default was to “Automatically increment version code”.

Now we’ll also want to sign the app.

Since you’re reading a tutorial on CI I’m assuming you’ve already put together a keystore file. If you don’t know how to do that, consider taking my React Native to Production course. Or read the docs.

Upload the right keystore and set the necessary environment variables.

Configuring Deployment

You can set up different distribution groups for your app (remember you’ll have to do this for both the iOS and Android target) by click “Distribute” in the left drawer then clicking “New Group” in the top right.

When you invite someone they’ll be sent an email with a link that will have them create an account, install the necessary certifications, and then they’ll need to wait for a build to be published! It’s really straightforward (even more so on Android).

iOS onboarding flow

Now let’s go and turn on distribution for this build. I’ll then trigger a build.

Once the build happens you’ll see this and anytime you push to staging a new build will automatically be built and distributed to the appropriate test group.

Once the build completes all of the users the app is distributed will get an email and go through a very simple install process.

iOS Install Process

Android Install Process

I’m really excited to start using Visual Studio App Center in my apps! I’ve only just scratched the surface of the features available so I encourage you to check it out!

Have more questions about bringing your React Native app to production? Check out my course, React Native to Production, or hit me up on Twitter!