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.
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.
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 foldernpm 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”> <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.
The build process is setup and will build and create a IOS build every time a developer pushes to master.