How to configure CodePush for multiple development environments iOS & android in react-native

Here in this article, we are going to setup three different distribution channels in AppCenter for our production, testing and development environments and release app builds pointed to these three environments. Then we’ll go ahead and configure CodePush for these environments and enable the facility to doing CodePush updates for the builds that being pointed to those.

In our previous articles, we have explained how to build CI/CD pipeline for android & iOS using Github actions + Ms AppCenter. There we have used three AppCenter channels as ENV_DEV, ENV_TEST and ENV_PROD. Today, we are going to integrate Ms CodePush for these three channels in both android & iOS. Here we are going to use the same channels that we have been build in our previous articles. Those who don’t know about CodePush yet, read what is CodePush first.

01. Integrating CodePush sdk

First we need to install CodePush sdk for react-native.

Yarn:

yarn add react-native-code-push

npm:

npm install — save react-native-code-push

02. iOS Setup

We need to add the CodePush plugin for native iOS project. You can simply do it with a pod installation.

cd ios
pod install 
cd ..

Then navigate to your AppDelegate.m file and add the CodePush header import.

import <CodePush/CodePush.h>

03. Android Setup

Navigate to android/settings.gradle file and add the following code block

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

Then we have to add newly imported codepush.gradle file into our react.gradle file as a build task.

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

Above code snippet, we are importing CodePush from application’s node modules and apply it to our react-native android gradle.

Next, we have to update our MainApplication.java file and should include CodePush in our application.

import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

First, we have imported the CodePush plugin class to our application from our packages. Then we created and override for CodePush to determine where our javascript bundle should render when application starts.

03. Initialising CodePush in react-native

Here, we’ll wrap our root component with a higher-order component provided by the CodePush. We can also add some CodePush options here as well.

import CodePush from 'react-native-code-push';

let CodePushOptions = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
  mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
  updateDialog: {
    appendReleaseDescription: true,
    title: "a new update is available!
}

class MyApp extends Component {
    ...
}

export default CodePush(CodePushOptions)(myApp);

checkFrequency : How frequent when application want to check for new updates

04. Setting up CodePush deployment on Ms AppCenter

First create ENV_DEV, ENV_TEST and ENV_PROD channels on AppCenter. If you don’t know how to do that, read this first.

I’ll start with ENV_DEV channel, but this is same for all other channels as well. Go to Distribute > CodePush and click Create standard deployments

Now you have created a standard deployment of CodePush, It’ll generated you Staging and Productions deployments. But if you want more you can create custom deployments as well.

Click the settings icon on top right, you’ll be able to see the private keys (CodePushDeploymentKey) for your standard deployments. You have to add these keys on your project in order to configure CodePush deployments.

Go ahead and create standard deployments for ENV_TEST and ENV_PROD channels as well.

05. Add CodePushDeploymentKey for android product flavors.

First we need to configure product flavors for our dev, test and prod environments. Go to android/app/build.gradle file. Add productFlavors for dev, test and prod. If you don’t know how to configure producFlavors in android, read this. Now we can add our CodePushDeploymentKey as a new restValue on each flavor.

productFlavors {
 prod {
   versionCode 1
   versionName "1.0.0"
   applicationId "com.tharindu.myapp"
   resValue "string", "build_config_package", "com.tharindu.myapp"
   resValue "string", "CodePushDeploymentKey", '"ENV_PROD_CODEPUSH_DEPLOYMENT_KEY"'
}
 test {
   versionCode 1
   versionName "1.0.0"
   applicationId "com.tharindu.myapp"
   resValue "string", "build_config_package", "com.tharindu.myapp"
   resValue "string", "CodePushDeploymentKey", '"ENV_TEST_CODEPUSH_DEPLOYMENT_KEY"'
}
 dev {
  versionCode 1
  versionName "1.0.0"
  applicationId "com.tharindu.myapp"
  resValue "string", "build_config_package", "com.tharindu.myapp"
  resValue "string", "CodePushDeploymentKey", '"ENV_DEV_CODEPUSH_DEPLOYMENT_KEY"'
}
}

Copy the relevant CodePushDeploymentKey from ENV_DEV, ENV_TEST and ENV_PROD channels and placed in the resValue of relevant productFlovor.

05. Add CodePushDeploymentKey for iOS targets.

First we have to create 3 different targets in Xcode. Name it as dev, test and prod. I have clearly explained how to do that in one of my previous articles.

We have to use 3 different plist files for each of our Xcode targets. Right click on your project and click New File.

Select property list as the file type and create a new plist file.

Give a meaningful name and select a particular target from the checkbox of at the bottom.

Add three new plist files for all 3 targets. Or else, you can create plist files separately and can be added those to particular target by target > Build Phases > Copy Bundle Resources as well.

Now go to your each plist file and add the following line with the relevant CodePushDeploymentKey.

<key>CodePushDeploymentKey</key>
<string>CODEPUSH_DEPLOYMENT_KEY</string>

Now we are all done with the configurations. Now build an ipa and apk with above configurations and install those on particular devices in order to receive a CodePush update.

06. Deploying app updates with CodePush

Release updates using CodePush is a fully command line based process. First we need to install App Center CLI for this.

Yarn:

yarn global add appcenter-cli

npm:

npm install -g appcenter-cli

Once we done with the CLI installation, then we have to log in to our AppCenter account.

appcenter login

Now we can release the updates via AppCenter CLI. Our update command should be in following format.

appcenter CodePush release-react -a {user|organization}/{app name} -d {environment} -t {target app version}

I’ll push an update to TEST build of MyApp-Android on AppCenter using following command. Note that I need to send this update to MyApp version 1.0.0

appcenter CodePush release-react -a MyApp-Android/ENV_TEST -d Production -t 1.0.0

Once you’ve added and update. You’ll be able to see it on CodePush section of the AppCenter. And your app will be starting to show those changes within few minutes.

In AppCenter dashboard, you’ll be able to see all the stats about a particular CodePush update.

Congratulations! Now you can update your applications without waiting for approvals and review process. Cheers!

Please keep in mind you can’t update everything via CodePush. It only works for javascript file changes. Others will crash your smoothly running applications. Please read this for more details.

07. Where to go from here?

The problem with manual CodePush releases is, it’s hardly bounded with our personal machines. The changes of the npm environment of our personal computers will be affected to CodePush updates as well. To avoid that and do a safer CodePush release, we need to automate the CodePush release process as well. Don’t worry, here we have explained how to do that.