Up & Running with React Native + Visual Studio Mobile Center

In this post, we will add CodePush and Analytics to a new React Native Project

In the following posts in this series about Visual Studio Mobile Center by Microsoft, we will also walk through push notifications, crash reporting, and continuous deployment.

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.

Now, we have CodePush linked up with our project, so it’s time to go test it out!

Testing it out

Let’s go ahead and integrate the CodePush package, then run the project.

I will be working on iOS simulator, so I will be working with my RNCodePushIOS app and in index.ios.js.

I am changing my index.ios.js file to look like this:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
} from 'react-native';
import CodePush from 'react-native-code-push';
const CodePushConfig = {
  updateDialog: true,
  installMode: CodePush.InstallMode.IMMEDIATE
}
export default class RNCodePush extends Component {
  checkForUpdates = () => {
    CodePush.sync(CodePushConfig);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native Version 1!
        </Text>
        <Button
          title='Check for Updates'
          onPress={this.checkForUpdates}
        />     
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
  },
});
const App = CodePush(CodePushConfig)(RNCodePush);
AppRegistry.registerComponent('RNCodePush', () => App);

We’ve added a button attached to the class methodthis.checkForUpdates that will call a CodePush method called CodePush.sync, passing in a configuration object to sync. This configuration object will tell CodePush to provide an Alert Dialog (updateDialog: true)to tell the user about the update, and will also immediately install the new update (CodePush.InstallMode.IMMEDIATE vs the default of ON_NEXT_RESTART).

We’ve also used CodePush to create a new component called App, also passing in the CodePushConfig to configure our CodePush functionality.

Once we reload this, we should see something like this:

If you open a debugger console, you should also get a notification from CodePush that they are checking for an update:

CodePush logging from remote debugger.

When you click on Check For Updates, you should also see this message.

If you are seeing this, then CodePush is now hooked up! Next, let’s push a new update and test to see if we can download the new version to our device without refreshing or restarting our simulator.

To do this, I will just update our greeting to the following version 2 greeting:

<Text style={styles.welcome}>
  Welcome to React Native Version 2!
</Text>

Now, we will save to our editor and make sure we do not refresh, as we want CodePush to check the new bundle vs the existing bundle, and give us a new version.

Deploying the changes

After we make the changes, let’s bundle our app and deploy it to the CodePush server by using the command:

code-push release-react <appName> <platform>

So for me, this command will be:

code-push release-react RNCodePushIOS ios

If you would like to make the app update mandatory, you can add the -m flat(meaning they will not have an option in the dialog to ignore: code-push release-react <appName> <platform> -m).

You should then see an output like the following:

If you look at the bottom, below the progress bar, you will see the message “Successfully released an updated containing the <pathname> directory to the Staging deployment…”

So this means we have only updated the new code to the Staging deployment, but if you remembered we have created our app using the Production keys. This means there is one last step: we need to promote our Staging bundle to Production. On the command line, type the following command, replacing AppName with your app name:

code-push promote <AppName> Staging Production

Now, we should be able to open our simulator, click the Check for Updates button and see the new version of the app after the dialog opens up for us!

Mobile Center

CodePush

Now that CodePush is installed and up and running, let’s visit https://mobile.azure.com/apps.

We should now be able to log in and view our new iOS and Android apps, as well as some information about them in the dashboard:

Mobile Center Apps

If we would like to see information about our CodePush deployments, we can click on the App, then choose Distribute -> CodePush from the side menu to see any deployments:

Analytics

In the last part of this post we will go over adding Analytics to our React Native app.

To get started, we first need to install the iOS and Android SDKs for mobile-center-analytics using either npm or yarn:

npm install mobile-center-analytics --save

or

yarn add mobile-center-analytics

Now that the library is installed, we need to link and connect it to our mobile center account.

To do so, we will need our app secret. To get the app secret of a given app, click on the app name in mobile center, then click settings, and the app secret will be at the top right of the screen:

react-native link mobile-center-analytics

For now, when prompted for “should user tracking be enabled automatically?”, choose yes.

Now that our app has the new native library configured, we need to rebuild and rerun the native project.

Next, let’s go ahead and set up and test an event using the Analytics! The docs for Mobile Center Analytics are located here.

In index.ios.js, let’s go ahead and add a couple of events. The first thing we need to do is import Analytics:

import Analytics from "mobile-center-analytics";

We will be using the Analytics.trackEvent() method, so let’s create an event when the app loads, right before the AppRegistry call, and also in the CheckForUpdates method:

...
  checkForUpdates = () => {
    CodePush.sync(CodePushConfig);
    Analytics.trackEvent('Checking for updates');
  }
...
const App = CodePush(CodePushConfig)(RNCodePush);
Analytics.trackEvent('App loaded');
AppRegistry.registerComponent('RNCodePush', () => App);

Now, reload the app, and click the button a few times, then open the mobile center Analytics panel:

If you do not see your events being tracked, you may need to refresh the browser window.

Now, we should see our events being tracked.

If this is working for you, then we know we now have Mobile Center configured correctly!

Custom Properties

You can also pass in a second argument, an object or Map, as a way to track custom properties or variables.

Analytics.trackEvent('eventname', <object>);

For example, let’s say we want to log a user and want to log her or his name and age, we could do so like this:

... // imports etc
const user = {
  name: 'Nader Dabit',
  age: 36
}
export default class RNCodePush extends Component {
  trackProperties = () => {
    Analytics.trackEvent('tracking properties', user);
  }
  // the rest of the class
}

Now, when we log this out by calling it in some way, we should get this information logged into our Analytics console:

Follow this publication to see the next parts in this series where I introduce Crash Reporting, Push Notifications, and Continuous Integration!

My Name is Nader Dabit . I am a Developer Advocate at AWS Mobile working with projects like AppSync and Amplify, and the founder of React Native Training.

If you like React and React Native, checkout out our podcast — React Native Radio on Devchat.tv.

Also, check out my book, React Native in Action now available from Manning Publications

If you enjoyed this article, please recommend and share it! Thanks for your time