Building Better Ionic Apps with Ionic Pro, Part 4

Part1: Ionic Creator
Part2: Ionic DevApp
Part3: Ionic Monitor
Part4: Ionic Deploy

In our previous post, we set up Ionic Monitor to catch runtime errors and fix them before they become a disaster for end users. In Part 4 of our Ionic Pro series, we will go through the Ionic Deploy service.

Ionic Deploy allows us to publish changes and hot updates to our Ionic 3 applications without needing to recompile the app and resubmit to app stores. This is very useful for publishing bug fixes, minor business logic changes and UI/UX updates to apps. As discussed earlier in the series, this makes a really good combo with the Ionic Monitor service so that errors/bugs are resolved, and fixes are shipped to users quickly. One interesting and powerful use of Ionic Deploy is A/B testing. If required, we can create different channels for testing with several variations to the app/code.

It is important to know that when using Ionic Deploy, the only changes that can be pushed immediately are changes to the view (HTML), business logic (Javascript), assets (such as images in the www folder) and styling (CSS). It excludes any changes to the native binary, such as the native plugins (Cordova Plugins), config.xml or native images (icons, splash screens, etc). For these changes, the app has to be recompiled and must go through the app stores to be updated for the end users.

How it works

Ionic Deploy works with Git Flow to push updates in production, or for testing applications via different channels created in Ionic Dashboard. Channels are useful when you have to push different versions of the app to different groups.

By default, Ionic creates two Channels for every app linked to Ionic Pro:

1. Master channel is used to test pre-production builds.
2. Production channel is used for the production builds to update the app for the end users.

Set up Deploy

To set up Ionic Deploy, go to the Ionic Dashboard, select notes-app and go to the Code section:

Then go to the Channels tab and select Set Up Deploy for the Production channel:

Choosing a channel to set up deploy

Notice that in the channel mentions there is no active commit on the channel yet.

Choosing an appropriate update method

The image above shows that we can select one of the three options provided:

1. Download updates in background, install next time app loads. If we use this option, when we push an update, the next time the user opens the app, it will identify that there is an update available. The plugin will download the update in the background and will apply the update the next time the user opens the app again.
2. Download updates in splashscreen and install immediately. Using this option, when we push an update, the app will start downloading the update as soon as the user opens the app (while displaying the splashscreen). The update is immediately applied and the user will see the updated version.
3. I’ll manually perform updates in JavaScript. This option is well suited for more control over the updates on special business cases. The developers can write their own logic on how and when to apply the update.

The next step is to open terminal, navigate into the app’s root folder, and copy the command as shown below:

Copying the Ionic plugin code

Now execute the copied command:

cordova plugin add cordova-plugin-ionic --save \
--variable APP_ID="bafeb0a1" \
--variable CHANNEL_NAME="Production" \
--variable UPDATE_METHOD="auto"

When working on your own application, substitute your APP_ID and CHANNEL_NAME above and execute the command using terminal. Notice that we have some changes in the repository now, including package.json and config.xml as below:

Cordova plugin added to config.xml

The important thing to notice is that we have the APP_ID, CHANNEL_NAME and UPDATE_METHOD added with the cordova-plugin-ionic entry in config.xml. The Ionic plugin communicates with the Ionic Deploy service using the values from this entry in config.xml. If we choose the manual method in the update (i.e. if the value of UPDATE_METHOD is set to none), we would have to deal with the update mechanism in our code (we won’t be covering the manual method in this post).

The next step is to configure Ionic Pro for automated deployments. To do that, go back to the channels page, click on Productionchannel, click Settings, enter production as the branch, and hit Save Channel:

The next step is to push these changes to Ionic Pro. First, commit and push the changes in the master branch. Then, create a branch named production. This branch will deploy the changes when we run git push ionic production.

Commit and push the changes in master, then create the production branch:

git checkout -b production

Now, push the code to the production branch:

git push ionic production

After pushing the code to Ionic, the terminal will display the information below which explains that the new build has been triggered:

In the Ionic Dashboard, we can now see the new deployment:

Testing Deployments

To test that the deployments work in real time, we are going to change the Add Note button on the home page to an ion-fabbutton. Quick recap: here’s what the current home page looks like:

Below is the code that we have for the Add Notes button in the current app:

<button id="home-button1" ion-button clear color="positive" block>
  Add Note
</button>

We will replace the button with an ion-fab button:

<ion-fab top right edge>
 <button ion-fab mini><ion-icon name="add"></ion-icon></button>
</ion-fab>

After making the changes, commit and push to master. Then, checkout production:

git checkout production

Now, merge the changes from master into production:

git merge master

We are now ready to push the changes to Ionic Pro. Execute the command:

git push ionic production

Our app is currently running on an Android device as shown above. First push the changes to Ionic and then restart the app to see the changes automatically without recompiling the app for the device. The device should automatically get the updated changes:

We can also see in the Ionic Dashboard that our Production channel now has the build with the changes pushed:

There are some cases when a build is accidentally pushed with vulnerabilities or errors, and we really want to jump back to the previous stable build so we can fix the issues. Luckily, Ionic provides a way to easily roll back the changes. Click on a channel and roll back to one of the previous builds, if necessary:

Conclusion

Ionic Deploy is a really powerful tool and highly recommended for hot updates and managing channels for deployments. For a product owner or developer who is responsible for deployments, Ionic Deploy makes it really easy to manage the deployments, create auto-deployment mechanisms, provide hot updates or hot fixes, and roll back to a previous stable build if required.

This is the last part of our Ionic Pro series. You can access the app built during the series here.

Sharing is caring! Please hit that 👏 and share this article with anyone who might benefit from it. For more like this, follow Modus Create: Front End Development and Ionic, or find me on Twitter.