Of all of the reasons companies are switching to React Native vs other means of mobile development, one of the most compelling is the ability to quickly push updates directly to a published app, bypassing the app store review process and timeline.

Of all of the tools available, CodePush is by far the most advanced and easy to use in my experience.

Recently, CodePush was integrated into a larger suite of tools located within Mobile Center, created by Microsoft, that also gives us the ability to easily add analytics, crash reporting, push notifications, and continuous deployment to our React Native projects!

We will walk through how to add Code Push and Analytics in this post.

CodePush

Installing CodePush

To get started, we will create a new React Native project, then install, enable and test CodePush in our project.

Click here to view the CodePush documentation.

The first thing we will do is create a new React Native project using react-native init :

react-native init RNCodePush

Now that the new project is created, we can cd into the project:

cd RNCodePush

Now that we have our project, we can go ahead and install the CodePush cli:

npm install -g code-push-cli

Creating a Mobile Center account

Now that we have the cli created, we need to either create an account or login to an existing account.

Register with code-push:

code-push register

or Login to an existing account

code-push login

If you are already logged in and would like to log out, you can type the command code-push logout to log out

We should be able to now sign up / authenticate using either a GitHub or Microsoft account.

Once we are registered / logged in, we should receive a token that we can use to paste into our command line to authenticate:

Getting login token from Visual Studio Mobile Center

Using login token from Visual Studio Mobile Center

Creating the CodePush App

Now that we are logged in, we need to create the CodePush app that we will be associating with our React Native Project.

We will be creating two apps, one for iOS and one for Android.

To do so, we need to issue a command that creates the app and app tokens. This command sets the app name, operating system, and the platform (react-native) we will be deploying.

We will need to do this once for each operating system. From the documentation, the command should look something like this:

code-push app add <appName> <os> <platform>

In our example, I will be calling my iOS app name RNCodePushIOS and my android app name RNCodePushAndroid, so my command will look be:

code-push app add RNCodePushIOS ios react-native

code-push app add RNCodePushAndroid android react-native

Once you run these commands, you should get something like this, with your production and staging keys:

We will be needing these keys in just a moment when we install CodePush into our React Native project.

You can retrieve these keys at any time by running code-push deployment ls <APPNAME> -k

Adding CodePush to our React Native project

Now that we have our app keys created and ready to go, we can now add CodePush to our React Native project.

To do so, let’s install CodePush using npm or yarn:

npm install --save react-native-code-push@latest

or

yarn add react-native-code-push@latest

Now that CodePush is installed into our project, we need to link the project dependencies. When we link the project, we will also be prompted for our app keys. Again, if you need to see your app keys, you can list all of your apps by running:

code-push app ls

Then, find the name of your app and run

code-push deployment ls <APPNAME> -k

To link the project, run:

react-native link react-native-code-push

When you get prompted for your keys, make sure you enter the Production key.