Push Code Updates to Apps Instantly with CodePush

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.

Frequently Asked Questions (FAQs) about CodePush

What is the difference between CodePush and other similar services?

CodePush is a cloud service by Microsoft that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish updates to. This differentiates it from other services as it allows updates to be pushed instantly, without the need to go through the app store update cycle. This means users can get access to the latest features and fixes much quicker.

How does CodePush work with React Native?

CodePush integrates seamlessly with React Native. It works by sending updates to the JavaScript bundle file that React Native apps use. When an update is available, it is downloaded in the background. Once the download is complete, the app will be prompted to restart, at which point the update is applied.

Is CodePush compatible with all versions of React Native?

CodePush is compatible with most versions of React Native. However, it’s always a good idea to check the official CodePush documentation for the most up-to-date compatibility information.

How secure is CodePush?

CodePush is a service provided by Microsoft, a company known for its commitment to security. All communication between the CodePush server and the client is encrypted using SSL. Additionally, updates are signed and verified to ensure they have not been tampered with.

Can I use CodePush for apps that are not built with React Native or Cordova?

Currently, CodePush only supports apps built with React Native and Cordova. However, Microsoft is always expanding its services, so it’s possible that support for other frameworks may be added in the future.

How does CodePush handle updates for different platforms?

CodePush allows you to manage updates for different platforms separately. This means you can push updates to iOS and Android users independently, allowing for greater flexibility and control over your app’s update process.

Can I roll back an update if something goes wrong?

Yes, CodePush provides a rollback feature. If an update causes issues, you can easily roll back to a previous version. This ensures that your users always have a working version of your app.

How does CodePush affect the app review process?

CodePush does not bypass the app review process. Any significant changes to your app’s functionality or appearance will still need to be reviewed. However, minor updates and bug fixes can be pushed directly to users without needing to go through the review process.

Can I use CodePush for free?

Yes, CodePush is a free service. However, it does require an Azure account, which may have associated costs depending on your usage.

How do I get started with CodePush?

To get started with CodePush, you’ll need to install the CodePush CLI, register for a CodePush account, and then link your app to your CodePush account. Detailed instructions can be found in the official CodePush documentation.