Use CodePush for Your React Native Applications

Deploying a mobile application to the Apple and Google stores is a fairly simple process, but it often takes time, especially for iPhone and iPad applications. When you have an application that you update often, this can quickly become painful and time-consuming. That is where CodePush comes in. CodePush lets us update our applications directly on our users' devices without going through the store.

How does it work? CodePush will serve as a central repository for the JavaScript bundle. Then the CodePush SDK that we add to our application will take care of retrieving that build when it is updated.

However, you may still need to publish an update through the stores if the changes you made require rebuilding your application. For example: adding a library that adds resources directly inside the applications' native code.

CodePush is mostly used for small changes or bug fixes.

Installation

The first thing to do to use CodePush is install the CLI and create a new account.

npm install -g code-push-cli
code-push register

Creating an Application

After you have registered for the service, you can register your application.

If your React Native application is available on both Android and iOS, it is better to register two applications on the service.

Here is how to add your applications to CodePush.

Android:

code-push app add yourAppName-android android react-native

iOS:

code-push app add yourAppName-iOS ios react-native

Every time an application is created, the service returns deployment keys that you will need to enter during installation in your React Native application.

To start, add the CodePush dependency to our project:

yarn add react-native-code-push
react-native link

You will be asked to enter your deployment keys.

Enter the value of the Production key returned earlier. Then all that remains is to import CodePush and wrap your application with CodePush.

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
 
import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View } from 'react-native'
import codePush from 'react-native-code-push'
 
export default class CodePushArticle extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit index.ios.js</Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})
 
CodePushArticle = codePush(CodePushArticle)
AppRegistry.registerComponent('CodePushArticle', () => CodePushArticle)

By default, CodePush will check for updates every time the application starts. If an update is available, it will be downloaded silently and installed the next time the application is restarted, either explicitly by the user or by the operating system. This provides the least invasive experience for your end users.

It is also possible to add manual update checks through a button inside the application. Consult the documentation to see the different options.

Publishing Updates

To publish updates, go to the root of the React Native project and run the following commands:

code-push release-react youAppName-iOS ios
code-push promote yourAppName-ios Staging Production

The first command generates a new bundle.js and deploys it to the CodePush server. Then the second command lets you move the bundle from Staging to Production.

CodePush also provides other options for publishing updates, such as deploying an update to only a certain percentage of your users, or rolling back a version if there is a problem with the new update.

code-push release-react yourAppName-iOS ios --rollout 25%
code-push rollback yourAppName-iOS Production

We have finished covering the basics of CodePush. To conclude, CodePush is a very practical tool when you need to make fixes quickly. It is also very complete; in this article we covered only the basic features. You can read the documentation on GitHub to see all the available options.