Ionic Framework + CodePush

Last week, Microsoft open sourced and released a beta version of CodePush.

CodePush enables mobile applications powered by Cordova and React Native to be updated through the cloud, bypassing the need for submitting updates through the App Store.


There are other alternatives to CodePush that have existed for a while now but none of them have are as flexible and easy to implement. Today, I’m going to dive into the basics of integrating CodePush with your Ionic Mobile App. We will be deploying to android for this example.

First, let’s go ahead and seed an Ionic blank app. Let’s call it codePushApp.

$ ionic start codePushApp blank

After Ionic seeds a blank application, go into it’s directory and open up app.js located in www/js/app.js. Add the following code inside the $ionicPlatform.ready function of app.js

function displayMessage (message) {
navigator.notification.alert(message, null, ‘CodePush’, ‘OK’);
}
window.codePush.sync(function (syncStatus) {
switch (syncStatus) {
case SyncStatus.APPLY_SUCCESS:
//Success
return;
case SyncStatus.UP_TO_DATE:
displayMessage(“The application is up to date.”);
break;
case SyncStatus.UPDATE_IGNORED:
displayMessage(“The user decided not to install the optional
update.”);
break;
case SyncStatus.ERROR:
displayMessage(“An error occurred while checking for
updates”);
break;
}
});

You’ll also want to add the following meta tag to your index.html

<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net/ 'self' ... ">

Setting up CodePush

Now let’s get CodePush installed on our computer.

$ npm install -g code-push-cli

After you’ve installed the CodePush CLI, you’ll need to login onto the platform. You can do that by entering the following command:

$ code-push login

Your browser should open and ask you to authenticate using either GitHub or Microsoft account. It should look something like this:

After authenticating, you will be given an access token to copy into your terminal window. This will authenticate your machine with CodePush until you decide to logout.

Next, we will need to register our app with CodePush. For this example, let’s continue our current convention by calling it ‘codePushApp’.

$ code-push app add codePushApp

You should now see deployment keys for both Production and Staging. Let’s copy the staging deployment key and copy it into the config.xml of your Ionic app. You will want to paste that key inside like this (Replace <Staging Key> with your own deployment key)

<platform name=”android”>
<preference name=”CodePushDeploymentKey” value=”<Staging Key>"/>
</platform>

Next, we’ll need to install the CodePush plugin into our Ionic app.

$ cordova plugin add cordova-plugin-code-push

After doing so, build your android mobile application as you normally would in Ionic

$ ionic build android

The generated APK is now ready to be installed and is CodePush enabled. Install the app and run it on your android device to make sure it is working.


Updating using CodePush

After you’ve made some modifications to your Ionic app and are ready to update using CodePush, you’ll want to first build your mobile app:

$ ionic build android

After doing so, you’ll want to push your changes to the CodePush server. You’ll need to pass in the CodePush App ID, the build www folder and the version of your app.

$ code-push release codePushApp platforms/android/assets/www/ 0.0.2
Released a new package containing the "platforms/android/assets/www/" directory to the "Staging" deployment for "codePushApp".

Go back to your android device and re-launch the mobile app to see an alert asking you to update your app.

CodePush asking user to update mobile app
Mobile app after CodePush update

So, there you have it. An Ionic app with CodePush integration. Hope you enjoyed this brief walkthrough. Feel free to reach out or leave a comment below if you have questions or comments.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.