Mobile
Article

Push Code Updates to Apps Instantly with CodePush

By Jay Raj

Frameworks for creating hybrid apps allow developers to write one code base that they can use across multiple platforms and app stores. This speeds up and simplifies development time, but you still depend on app store submission processes to rollout updates, slowing your development cycle. CodePush from Microsoft allows you to push code updates to apps instantly, and is similar to Siphon, which I wrote about recently. CodePush supports both cordova and react native apps at the moment, and has a useful command line tool.

What You’ll Create

In this tutorial I’ll show you how to create a simple cordova based app. The main focus will be on how to configure the app to use CodePush for updating the app without publishing updates to an app store.

Getting Started

SitePoint has a comprehensive guide for installing and configuring cordova for all platforms and mobile devices. If you haven’t used cordova before, I recommend you read it first.

Next, install the CodePush command line tool.

npm install -g code-push-cli

You’ll need to register for CodePush using a Microsoft or GitHub account. Use the following command to open an authentication tab:

code-push register

Creating the Cordova App

Create the cordova app using the following command:

cordova create CordovaMobileApp

Navigate to the project directory and add the android platform:

cordova platform add android

Build the default app:

cordova build android

This will build an .apk file that you can copy to a device, or to run immediately, use:

cordova run android

Default Cordova Mobile App

I’ll use jQuery mobile to create a simple user interface for the mobile app. Open the CordovaMobileApp project directory, and in the www folder, edit index.html to replace the existing code with the following:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Cordova Mobile App</h1>
    </div>

    <div data-role="content">    
        <p>Welcome to Cordova App, CodePush</p>        
    </div>

</div>

</body>
</html>

Save the changes and rebuild the cordova app to get the updated .apk file.

Deploy it onto an android device and you should have the updated user interface.

Cordova Mobile App User Interface

Push Code Updates to App

You just created a simple Cordova app. Now you need to register it with the code push service.

code-push app add CordovaMobileApp

Once you have registered the app, it will return the deployment keys for staging and production. Note the keys which you’ll use later. After you have registered the app, install the required code push plugins:

cordova plugin add cordova-plugin-code-push@latest

After the plugins have installed, it’s time to add the code push deployment keys to the mobile app’s config.xml file:

<platform name="android">
    <preference name="CodePushDeploymentKey" value="YOUR-DEPLOYMENT-KEY" />
</platform>

You can add either the production or staging key for now. To ensure the app can access a ‘Content Security Policy‘ (CSP) compliant platform, add the following meta information to the index.html page.

<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

To make the app able to sync changes from the code push server you need to make a call in the deviceReady event. Open www/js/index.js and add the following code to the onDeviceReady function:

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    codePush.sync();
 }

Since you have already deployed the mobile app to a device, make some user interface changes in index.html and push an update release using code push.

Change the message in index.html as shown:

 <p>Welcome to Cordova App, CodePush - UPDATE</p>

Next, prepare the app for release. In the official documentation, I tried to use the following code to prepare and release the mobile app:

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

But for some reason it didn’t work for me. If it also doesn’t work for you then use these two commands to prepare and release the app:

cordova prepare android
code-push release CordovaMobileApp ./platforms/android/assets/www 0.0.1

0.0.1 is the version number from the config.xml file.

After you have pushed the app release, try restarting the app installed on your device and it should be updated.

Updated App

Pushing Forwards

In this tutorial, you learnt how to get started with CodePush, a cloud service that lets you instantly push code updates to your hybrid apps. Please let me know any comments or questions you have below.

  • http://www.gaurav.mobi Gaurav Chandra

    Not working for me. I get this message at the end: “Successfully released an update containing the “./platforms/android/assets/www” directory to the “Staging” deployment of the “codeship” app.” but when I restart the app, nothing happens. Here is the code I use on deviceready:

    codePush.sync(null, { updateDialog: true, installMode: InstallMode.IMMEDIATE });

    • http://www.gaurav.mobi Gaurav Chandra

      it works when in the end I run :

      code-push promote codeship Staging Production –des ‘Staging -> Production’

      only then the app is updated on device. The default option for the codeship cli is to upload to staging.

      or you do:

      code-push release-cordova codeship android -d Staging //for staging

      code-push release-cordova codeship android -d Production //for production directly

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Mobile, once a week, for free.