What is CodePush?

CodePush is a simple, yet powerful service for app developers. It is an App Center cloud service using which Apache Cordova and React Native developers can deploy mobile app updates directly to their users’ devices. .

It is a service provided by Microsoft for Cordova and React Native apps, that allows you to push out new versions of your javascript bundle to your app users.

CodePush simplifies the app update process along with eliminating app submission and approval wait times. It acts as a central repository, making it easy to publish asset tweaks and changes that don’t require you to build a binary, such as JavaScript, HTML, CSS.

Image Courtesy : https://blogs.msdn.microsoft.com

How to CodePush-ify your app ?

All React Native apps created on App Center are CodePush enabled by default, to start using CodePush you simply need to follow the following steps :

  • Install the CodePush CLI

To install the CLI, open a terminal window or command prompt and exeute the following command:

npm install -g appcenter-cli

  • Create a CodePush account –

Add the CodePush client SDK to your app, and configure it to pull app updates from one of your deployments in App Center. The following sections provide details on how to do this for the supported app platforms:

  1. Apache Cordova
  2.  React Native
  •  Release an app update –

After making changes to your app’s code or assets, publish the update to App Center using the App Center CLI as described in the following sections.

React Native

Execute the App Center CLI release-react command to bundle your app’s code and asset files, then publish them to the App Center server as a new release. For example:

appcenter codepush release-react -a <ownerName>/MyApp

Cordova

Execute the App Center CLI release-cordova command to bundle your app’s code and asset files, then publish them to the App Center server as a new release. For example:

appcenter codepush release-cordova -a <ownerName>/MyApp

You can choose one of the following two options:

Option 1: Wrap your root component with the codePush higher-order component:

component:

import codePush from “react-native-code-push”;

class MyApp extends Component {
}

MyApp = codePush(MyApp);

 Option 2: Use the ES7 decorator syntax:

import codePush from “react-native-code-push”;

@codePush
class MyApp extends Component {
}

By default, CodePush checks for updates every single time app starts. If an update is available, it will be silently downloaded, and installed the next time the app is restarted, which ensures the palatable experience for end users. If an available update is obligatory, then it will be installed immediately, ensuring that the end user gets it as soon as possible.

You can also sync up with the CodePush server every time the app resumes from the background. The CodePush service itself synchronizes files between developers and their end-users. It is the client SDKs that layer the opinion on top regarding the types of files they help synchronize. For example, the Cordova plugin will sync any files which live in the platform-specific xyz folder (including images, etc.), and the React Native plugin will sync your JS bundle file and any image assets.

That’s all about Codepush! You can now go pushing quick app updates to your users.