Implementing CodePush in React Native

Live and hot reloading are two remarkable features in React Native. However, mobile developers have expressed a desire to push updates to end users directly in production, which would be a faster and more efficient alternative to updating the app in the Google Play store and the iOS App Store.

In this tutorial, we’ll use react-native-code-push, a React Native module for CodePush, to deploy app updates directly to users. We’ll provide step-by-step instructions to get started and even run through a detailed demonstration. First, let’s learn what CodePush is and what its benefits are.

What is CodePush?

In mobile applications, fixing bugs can break the entire application. Once an application has been released, any updates to the code must be recompiled and reviewed by the mobile app store before being pushed to users.

CodePush, a cloud service managed by Microsoft AppCenter, allows developers to instantly deploy mobile updates to end users. CodePush synchronizes JavaScript code with any updates released to the CodePush server, meaning you don’t have to update your app in either app store.

In the case of new updates, Codepush provides rollbacks, and it includes testing configurations for many devices and platforms.

Setting up CodePush

To add CodePush to an application, the application must already be deployed to a mobile store. For this tutorial, you can either follow along with my example below or implement CodePush in one of your existing applications. We’ll start by creating a standard deployment on AppCenter.

If you haven’t already, create an account on AppCenter. Create a new application and select the Add new app button. You should see the following page:

We added a name for our application, Meatball App. Then, we selected our type of release from Production, Beta, and Store. Next, select the OS and platform you’re developing for. Once you’ve added these details, you can select the Create new app button.

Configuration options

There are three different options to configure your application for different platforms.

For one, build frequency lets you automatically run builds for different platforms whenever a change is made to a branch. Distribute builds allows you to distribute applications to mobile app stores. Check the Distribute section of your AppCenter dashboard to enable this feature. Lastly, you can add build scripts to your package.jsonthat run post-clone, pre-build, and post-build and represent the stages of application development.

Distribution options

To distribute your React Native application in either the iOS App Store or the Android Google Play store, you first need to connect your application. Navigate to the Distribute section of your AppCenter dashboard, click on Stores, and connect your application to the store:

To launch your app on iOS, you’ll need to register Apple developer:

Creating standard deployments

Now that we have CodePush set up and configured, navigate to CodePush from your application dashboard and click on Create standard deployments:

In the top right corner of your AppCenter dashboard, select Staging as your application environment:

Once you’ve selected the application environment, click on the settings icon on the right side of your dashboard to reveal your application’s private keys:

Now that we have standard deployments set up, let’s integrate CodePush into our React Native application using react-native-code-push.

Integrating CodePush into React Native

First, we’ll install react-native-code-push using one of the commands below

Yarn:

yarn add react-native-code-push

npm:

npm i --save react-native-code-push

Integrating CodePush is different for iOS and Android. Let’s take a closer look.

iOS setup

To add the CodePush plugin to a native iOS project, first, install the pod with the command below:

cd ios
pod install 
cd ..

Next, we’ll install cocoa pods dependencies. Navigate to your AppDelegate.m file and import CodePush headers into your file:

import <CodePush/CodePush.h>

Android Setup

To integrate react-native-code-push in a native Android project, navigate to the settings.gradle file in the Android folder 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')

Next, we’ll add the 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"

In the code snippet above, we applied CodePush to our React Native Android Gradle, importing it from our application’s Node modules.

Next, we’ll update our MainApplication.java file to 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 imported the CodePush plugin class into our application from our list of packages. Next, we created an override for CodePush to determine where our JavaScript bundle should render when our application starts.

Initializing CodePush in React Native

To initialize CodePush, we’ll wrap our root component with a higher-order component provided by CodePush. We’ll also add a few CodePush options, like a title tag for displaying live updates to users:

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 MeatBallApp extends Component {
    ...
}

export default CodePush(CodePushOptions)(meatBallApp);  

In the code block above, we imported CodePush from our packages, then listed several options for our application. For one, checkFrequencydefines when we want our application to check for new updates. In our case, we set it ON_APP_START, however, there are other options available. mandatoryInstallMode defines when we want to install mandatory updates. In our application, we marked it ON_APP_START.

updateDialog determines whether a confirmation text or screen will be rendered to the user when an update is available and what kind of text or object will be rendered. If set to true, we render the default strings for updates on both Android and iOS. Lastly, we used updateDialog: title and a title of type stringto add titles to an updateDialog. 

Depending on the nature of your application, you may also want to add more options, like minimumBackgroundDuration, which is used to set the minimum amount of time in seconds an application should run in the background before it is restarted.

Deploying app updates with CodePush

To release updates on our React Native application using CodePush, first, we’ll need to install the App Center CLI package:

Yarn:

yarn global add appcenter-cli

npm:

npm install -g appcenter-cli

Once we’ve installed the App Center CLI package, we’ll log in into our AppCenter using the command below:

appcenter login

Now, we can release updates to our application with CodePush using the following format:

appcenter CodePush release-react -a {user}/{app name} -d {environment}

To push updates to our application, we’ll use the code below:

appcenter CodePush release-react -a Fortune-Ikechi/MeatBallApp -d Production

Another way to push updates using CodePush on a React Native application is to add the command as a script on our application’s package.json using the format below:

"scripts: {
  "CodePush:ios": "appcenter CodePush release-react -a Fortune-Ikechi/MeatBallApp -d Production",
  "CodePush:android": "appcenter CodePush release-react -a Fortune-Ikechi/MeatBallApp-Android -d Production"
}

Once you’ve added an update, reload your AppCenter dashboard to ensure your release is there. When you rerun your application, you should be able to download the latest version of your application.

Conclusion

Now, you know how to add CodePush to your React Native application! The react-native-code-push module allows you to deploy app updates directly to your end users instead of through a mobile store. We created standard deployments, set up react-native-code-push for iOS and Android applications, and finally, deployed our updates.

You can read more in the CodePush documentation and Microsoft AppCenter docs. I hope you enjoyed this tutorial!