Setting up React-Native for CI/CD using visual studio app center

Home > Blog > Development > Setting up React-Native for CI/CD using visual studio app center

React-Native has revolutionised how we build native apps for IOS and Android. The huge cost savings, velocity of development that react-native brings to the table overshadows the miniscule performance degradation drawback as compared to a truly native app.

The fact that you can get both Android and IOS app along with huge reusable code base that can bring significant savings for building web front end using Reactjs is revolutionary. Instead of having 4 teams, doing Android development, IOS development, Web frontend development and backend development, We can use the same team to do all of them as React (Web), React-Native (Android and IOS ), Nodejs (Backend) use javascript. The ramp up from react to react-native is pretty minimal as well.

Building for Playstore and Apple store is a huge time consuming task that happens multiple times throughout the development cycle, Automating this process to build and publish to Test Flight/Android beta on every push or on demand is huge. Although it takes some time for setup upfront, The potential savings from this initial effort is huge.

In this blog, I will cover step by step process to creating a new React-Native project and setting up CI/CD pipeline for deployment to Playstore and Apple store

1) Setup development environment for React-Native as recommended.

https://reactnative.dev/docs/environment-setup

You should be able to see the React-Native welcome screen in a simulator on your computer.

Push your changes to your repository on github

2) Create an account on https://appcenter.ms/ (Visual Studio App Center)

Create an account on Visual Studio App Center

Click “Add app”

3) Select the options based on what you are building for

Enter the realvent details, based on what plat form you are targetting.

If you are building both IOS and Android app, you will need to add two separate apps.

You will need to select the release type based of what stage you want to be able to deploy them he app.

4) Add app centre sdk to your application

1 ) Run the following command on the terminal of your development machine inside the project root folder
npm install appcenter appcenter-analytics appcenter-crashes –save-exact
 
2) Integrate the SDK

Run CD IOS &&pod install from iOS directory to install CocoaPods dependencies.

Create a new file with the name AppCenter-Config.plist with the following content. Don’t forget to add this file to the Xcode project (right-click the app in Xcode and click Add files to <App Name>…).

<?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE plist PUBLIC “-//Apple//DTD PLIST 1.0//EN” https://www.apple.com/DTDs/PropertyList-1.0.dtd&#8221;> <plist version=1.0> <dict> <key>AppSecret</key> <string>b254be36-9614-40c6-bf0d-6068d5140f51</string> </dict> </plist>

Modify the app’s AppDelegate.m file to include code for starting SDK:

Add these lines to import section

#import <AppCenterReactNative.h> #import <AppCenterReactNativeAnalytics.h> #import <AppCenterReactNativeCrashes.h>

Add these lines to the didFinishLaunchingWithOptions method

[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

5) Test the integration

Now build and launch your app, then go to the Analytics section. You should see one active user and at least one session! The charts will get more relevant as you get more users. Once your app actually crashes, you will have Crashes data show up as well.

6) Connect to the repository

1) Click on build

2) Select the code repository on which the he code is hosted

3) Authorize your code repository access to Azure app center

4) Select the repository that has the react-native code

7) Edit build settings

Edit build settings

Enable build signing

How to get the required certificates?

This is a useful resource for creating distribution certificate.
https://support.magplus.com/hc/en-us/articles/203808748-iOS-Creating-a-Distribution-Certificate-and-p12-File

The build process is setup and will build and create a IOS build every time a developer pushes to master.

Leave a Reply