Everything you need to automate React Native Apps with Visual Studio App Center for FREE

Published in

Ascentic Technology

7 min readMar 8, 2020

Figure — Automate React Native applications using Microsoft Visual Studio App Center

That’s right, I will be talking about automating React Native mobile application builds using Microsoft App Center for FREE which includes 240 build minutes / Month. App Center is capable of doing much more than that but the focus area is automating React Native apps. The article is intended to increase the efficiency of releases and thereby minimizing manual releases of both development and production releases. Hope this article will be a quick guide for DevOps engineers too…

Prerequisites

Use of a cloud / self-hosted version control service such as Github or Bitbucket. App center supports Azure DevOps, GitHub, Bitbucket and Gitlab.
A repository with your React Native mobile app source code
An Apple App Store and Google Play developer accounts
Apple provision profile, distribution and p12 files
Android developer and release key store files
An account in Microsoft App Center of course! (If you have not signed up for an account, Don’t panic, just sign up over here https://appcenter.ms for FREE and I hope to take care of the rest.)

Let’s get started!!!

For the sake of this article, let’s assume we have three environments namely, development, staging and production and that we have three branches namely, dev, staging and prod to represent the environments.

Step 1 —Visit App Center via https://appcenter.ms and sign in to get started

Step 2 — Now visit App center all apps page via https://appcenter.ms/apps and click on Add new app menu under Add new dropdown.

Step 3 — Here you need to give a name for the project e.g. HelloWorldApp. Depending on your release carefully choose the release type. You may choose alpha or beta for development releases or choose production as the release type if its a production build. Choose iOS or Android as the OS type and then choose React Native as the platform. Once done click on Add new app button.

Step 4— First let's see if you have connected your source code repository to App Center. If you have already done this you may skip this step. When you are configuring mobile apps for the first time or if you go to the Build tab, you should see a list of repository services App center support. App Center supports Azure DevOps, GitHub, Bitbucket and Gitlab. Choose the one that you work with. You will be asked to authorize and grant access to the repository. If you have successfully connected then you will see your repository list (If this does not work you might want to sign in as a privileged user in order to successfully connect the repository with your App Center account).

Let’s go through the setup of creating an iOS project

Step 5 — Now within the newly created app you should see the Overview page or click on the app you just created from the home page and go to Build tab and you will see a list of branches pulled from your connected repository. If you don’t see a list of branches or have not configured a repository, please follow instructions in Step 4.

Step 6— Click on the branch you need App Center configured to automate the build.

Step 7— Click on the Configure button and you should then see build configuration options. If you’re configuring for the first time the button should be named as Configure build.

Step 8— Fill in the configuration options you require for your project. I will only discuss a few important configurations which are mandatory for a successful build.

Xcode version — Choose the appropriate Xcode version you use

Sign Builds — You need to choose this option to run the build in a physical device. Upload the provisioning profile which you downloaded from Apple developer account. Use a distribution certification of your choice depending on the environment. E.g. If you want to use a build for development purposes then use a certificate created for iOS App Development. If you want to release a build to use on a physical device or release to Apple App Store then you may use a certificate of iOS Distribution type.

Distribute builds setting is needed when you need to notify your teammates or directly release to the app store. If you choose Groups you can send build notifications to a group of testers. A group can be created from the Distribute > Groups page. If you choose to “Store” you can distribute to App Store and TestFlight. The choice is yours :)

Step 9— Now what are you waiting for? Go and click on “Save & Build” button. You should immediately see a console window with a set of App center commands being run and when it’s finally built you should see the “Built” status with a Green color checked icon. Hurray!

Note: You may follow here if you want to distribute your app to Apple App Store.

Now, let’s go through the setup of creating an Android project

Step 5— Now within the newly created app you should see the Overview page or click on the app you just created from the homepage and go to the Build tab and you will see a list of branches pulled from your connected repository. If you don’t see a list of branches or have not configured a repository, please follow Steps 1–4.

Step 6— Click on the branch you need App Center configured to automate the build.

Step 7— Click on the Configure button and you should then see build configuration options.

Step 8— Fill in the configuration options you want for your project. I will only discuss a few important configurations which are quite mandatory for successful builds.

Approach — There are a few ways you can automate your android build. The first is to have the Keystore configuration details hardcoded in gradle.properties file which I do not recommend since sensitive information including the Keystore file is stored in the repository. Secondly, you can have the Keystore file located in the repository in the same way but instead of storing the information you can use environment variables including App center environment variables option. My recommended approach is to use App center configuration options so that we don’t have to store the Keystore files nor the details of its configuration in the repository which I believe is the most secured approach (Well you gotta trust App center to do all of this…).

Also, you don't have to deal with gradle configuration situations like this -

Whew! So that’s out of the way!

Build variant — If you choose to go ahead with debug as the release type you will have to configure your app in such a way __DEV__ is set to false so that the produced apk file will not be dependant on metro bundler during run time. Therefore, let's choose and focus on release as the build variant for our dev staging and production builds which will depend on a keystore file.

Build scripts is yet another scalable configuration if you have any custom code that needs run after cloning, before and post builds. E.g. If you need to inject the environment variable at a certain staging you can create a new bash script in project root level and App center will automatically identify it for you. Refer here for more information on build scripts.

Build frequency is self-explanatory. E.g. if you need to automate your builds when you push code to a specific branch you may choose “Build this branch on every push” option otherwise keep it manual builds. Manual builds is useful if you are within free tier usage you have the full control of your releases.

Sign builds — When this option is chosen you can upload the android keystore file and update keystore password, key alias and password in the configuration. You may have three keystore files for dev, staging and production. No problem! Just configure the correct keystore file in the relevant branch with its details.

Another important configuration App center provides is the Distribute builds option where you can choose a Group of testers so that they’re notified via email whenever a build succeeds. They will have an Install button embedded into the email which is pretty convenient I would say.

Note: For App center to work with release builds make sure to delete the signingConfig option from the buildTypes section of your build.gradle which is located in project-folder/android/app/build.gradle

Example —

buildTypes {
release {
// Caution! In production, you need to generate your own keystore file.
// see https://facebook.github.io/react-native/docs/signed-apk-android.
//signingConfig signingConfigs.debug ← Delete or comment out this line
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile(“proguard-android.txt”), “proguard-rules.pro”
}

Step 9 — Now what are you waiting for? Go and click on “Save & Build” button. You should immediately see a console window with a set of App center commands being run and when it’s finally built you should see the “Built” status with a Green color checked icon. Hurray!

Note: You may follow here if you want to distribute your app to Google Play Store.