CodePush is a service from Microsoft that helps improve the deployment experience of your React Native apps. React Native code has a native part (written in Objective-C or Java) and a JavaScript part (the code we write). Normally, when deploying an app to the App Store, the JavaScript code is bundled together with the compiled native code.

React Native app in Play Store

If there is a minor JavaScript code change, the app is recompiled and submitted to Play Store or App Store for rollout. For Play Store, app rollout takes an hour or so. For App Store, app rollout takes about a day. CodePush helps to bypass app deployment for JavaScript code changes. We will find out how.

CodePush ReactNative app

Instead of embedding JavaScript bundle into the app, CodePush workflow stores the bundle in Microsoft servers or Appcenter. The user downloads the app in the device. When the app starts, the app downloads the JavaScript bundle from Appcenter. When we want to update the app, we push the update to Appcenter. And the app automatically downloads the update when it restarts the next time. In this way, developers bypass the App Store rollout for minor updates.

Next, we will walk through a tutorial on how to integrate CodePush into an existing Android app.

Getting the deployment key

  1. Sign up for a new Appcenter account.
  2. Create a new app (PreviousNextAndroidApp).
  3. Click on the app, within Distribute section, click on CodePush
CodePush tab in Distribute section of the app

4. Create standard deployments. This will create a staging deployment and a production deployment for your app. For this tutorial, we will ignore the staging deployment and work directly with production deployment.

5. Install appcenter-cli.

6. Login to appcenter using the command line.

This step provides the access token in a browser window. Copy the access token and paste it into the terminal.

7. Get the appId of the newly created app.

This will list vijayst/PreviousNextAndroidApp(the app that you created in Appcenter)

8. Get the deployment key.

The deployment key is important and we will use it in the next section.

Integrate CodePush SDK

9. Add the react-native-code-push package.

10. Link the package.

This step will modify the native code. It will also ask you to provide the deployment key. Provide the Production deployment key.

11. Wrap the root component with codePush HOC.

12. CodePush the app bundle.

This will create a new release in Appcenter. It gets download automatically when we release the CodePush version of our Android app to the Play Store.

Publish new version

13. Increment versionCode and version number in two places: build.gradle and AndroidManifest.

14. Build the app.

Publish the APK to the Play Store and rollout a new version of your app.

15. Make a minor update to the app. Publish the update only to Appcenter. Test if your app picks the new update in the next restart.

The PreviousNext app which has the CodePush SDK is available in Play Store.

Integrate CodePush to a React Native Android app
Tagged on: