Code Push With Ionic 3

Mobile Development   •   Nov 1, 2018

app-center-and-ionic-code-push

One of the benefits when using the Ionic framework is the ability for rapid development. This allows for quick turn around on updates and new features. Going even further, developers can utilize the appcenter-CLI code push feature that allows packages to be released bypassing the store approval process. Users will be notified of a pending update and can install directly from within the app.

Step 1.

First, you will need to install the prerequisites in your Ionic application. Run the following commands to get started.

npm install -g appcenter-cli
ionic cordova plugin add cordova-plugin-code-push
npm install --save @ionic-native/code-push

Step 2.

Add the following code to your app.module.ts file


import {CodePush} from "@ionic-native/code-push";
@NgModule({
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CodePush,
  ]
})
export class AppModule {}

Add the following code to your app.component.ts file

import { CodePush, InstallMode, SyncStatus } from "@ionic-native/code-push";
  
  constructor(private codePush: CodePush) {
	this.initializeApp();
  }


  initializeApp() {
    this.platform.ready().then(() => {
      this.checkCodePush();
    });
   }

   checkCodePush() {
    this.codePush.sync({
      updateDialog: {
        appendReleaseDescription: true,
        descriptionPrefix: "\n\nChange log:\n"
      },
      installMode: InstallMode.IMMEDIATE
    }).subscribe(
      (data) => {
        console.log('CODE PUSH SUCCESSFUL: ' + data);
      },
      (err) => {
        console.log('CODE PUSH ERROR: ' + err);
      }
    );
  }

Step 3.

The next step is to setup the appcenter-cli. To do this you will first need to run the following command. After running this command a browser will open prompting you to login to your Microsoft Appcenter Account. If you do not already have an account you can create one here. Once you’ve signed in you will receive a token displayed in the browser. You will need to copy and paste that token back into your terminal then hit return or enter.

appcenter login

Once you’ve logged in you can now create an Appcenter app. To do this you will have to run the following command. It is strongly recommended to have separate apps for Android and iOS.

appcenter apps create -d myapp-android -o android -p Cordova
appcenter apps create -d myapp-ios -o ios -p Cordova

You will need to create two keys. One for production and one for staging.

  • Production – This is the key that you will include in your production release. When you push an update it will sync with all users that have this key in their app.
  • Staging – This is the key that you will use only while in development. Be sure to remove it from your config file before a production build or else you will not be able to test with that key because all new users will have it.

You can view your keys by running this command.

appcenter codepush deployment add -a / Staging
appcenter codepush deployment add -a / Production

Step 4.

The next step is to add your keys to your app. Open your config.xml file and add the keys like so. Make sure you only add production or staging and not both. You will have a production key for android and a different one for ios both must be added. If your testing, then add the staging keys instead.

Now you can push updates with codepush. First you will need to build or prepare your app with the normal ionic command.

ionic cordova build android --prod --release

Then you will run the appcenter command.

appcenter codepush release-cordova -a /myapp-android --description "Fix for login module" -d "Staging" -t 1.0.0 -x

The following commands are described as follows:

-a  the app that your are targeting either ios or android – ex. /myapp-android

–description   the description about the update that will be visible to users on the promt – ex. Fixed login module

-d   the key you are pushing to either production or staging – ex. Staging

-t   the version you are targeting – ex. 1.0.0

-x   this is to disable the release if you prefer to manually release it from the web app after you push this allows you to make changes and review on the Microsoft Appcenter site before actually pushing to users.

For more information please visit the following links:

Microsoft Cordova CodePush Docs

Ionic Native CodePush

AppCenter CLI Docs