Implementing CodePush in React Native

Part 1 & 2.

What is CodePush?

CodePush is an App Center cloud service by Microsoft which allows developers to deploy javascript updates to your mobile app without redistributing it through any public app stores. In short, you do not need to build iOS and/or Android version and wait for app review from the store!!

Here is how you can implement CodePush in 15 minutes! Configuring the files in order to use the library is always tedious. Please take your time and follow the steps carefully.

Part 1. AppCenter

1. Create an Account

Create an Account on AppCenter and then install appcenter-cli on your project.

$ npm install -g appcenter-cli

Once installed access AppCenter from the terminal.

$ appcenter login

Then new webpage will pop onto your browser with a token. Copy and paste it to the terminal.

Enter your token from the browser: [PASTE-IT-HERE]

2. Register Your App

You can either add a new app in AppCenter or in your terminal. If you are developing an app with react-native, create a new app for each platform.

While creating a new app, the app name, release type, OS and Platform are required.

If you prefer creating your app using the CodePush CLI,

$ appcenter apps create -d <appName> -o <OS>  -p <platform>

// Example
$ appcenter apps create -d travut -o Android -p React-Native
$ appcenter apps create -d travut -o iOS -p React-Native

After you have created an app, you can acquire a list of all CodePush releases you have created.

3. Deployment key

Now go to AppCenter MyAPP > Distribute > Code Push, there you will have a list of all Code Push releases you have created. You can also find the deployment key (CodePushDeploymentKey) which is required for updates. If you can’t find one, then you need to create one.

// Issue Deployment Key 
$ appcenter codepush deployment add -a <owner>/<appName> Staging
$ appcenter codepush deployment add -a <owner>/<appName> Production

By default, there are two deployments, Staging, and Production. This enables you to update to a specific deployment of your app.

You can retrieve the list of CodePushDeploymentKey by running the following code.

// Get Deployment Key List
$ appcenter codepush deployment list -a <owner>/<appname> -k

Part 2. Install CodePush SDK (React-Native)

To get started, install react-native-code-push by running the following command from your app’s root directory.

$ npm install --save react-native-code-push
or
$ yarn add react-native-code-push

1. iOS Setup

Before we begin, don’t forget to install all the necessary CocoaPods dependencies.

$ cd ios && pod install && cd ..

Open up the AppDelegate.m file, and add an import statement for the CodePush headers:

// path: root/ios/YOU-APP-NAME/AppDelegate.m
#import "AppDelegate.h"
#import <CodePush/CodePush.h>     // <= add this code
...

Find the following line of code, which sets the source URL for bridge for production releases then replace it as shown below.

Click here and get the code!

Then add the Deployment key to root/ios/APP-NAME/Info.plist

...                                    
<key>CodePushDeploymentKey</key>               // <= add this code   
<string>PUT_YOUR_DEVELOPMENT_KEY_HERE</string> // <= add this code
...

1. Android Setup

Step 1.

In your android/settings.gradle file, make the following additions at the end of the file.

Click here and get the code!

Step 2.

And then, add the following code in root/android/app/build.gradle

...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

Note! You might have the following error.

Cannot add task 'bundleDebugJsAndAssets' as a task with that name already exists.

Please double-check whether you have a duplicate code in root/android/app/build.gradle .

project.ext.react = [...]
...
apply from: "../../node_modules/react-native/react.gradle" <= !!!
...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

Step 3.

Update the root/android/app/src/main/Java/../Application.java file to use CodePush via the following changes:

Click here and get the code!

Step 4.

Add the Deployment key to root/android/app/src/main/res/values/string.xml:

<resources>
  <string name="app_name">AppName</string>
  <string 
    moduleConfig="true" 
    name="CodePushDeploymentKey">
    PUT-YOUR-DEPLOYMENT-KEY-HERE
  </string>
</resources>

Break time!!

You have completed all the configuration in order to use react-native-code-push. Well done! There are two parts left, but please do take some break time. When you’re ready, let’s continue how our app can communicate with AppCenter and get the right JS bundle to update our codes in the next post.

Happy Coding!

Reference

microsoft/react-native-code-push

Use CodePush to update your app live - Visual Studio App Center

Visual Studio App Center | iOS, Android, Xamarin & React Native

Implementing Code Push in React Native applications