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.
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:
- Master channel is used to test pre-production builds.
- 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:
Notice that in the channel mentions there is no active commit on the channel yet.
The image above shows that we can select one of the three options provided:
- 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.
- 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.
The next step is to open terminal, navigate into the app’s root folder, and copy the command as shown below:
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
CHANNEL_NAME above and execute the command using terminal. Notice that we have some changes in the repository now, including
config.xml as below:
The important thing to notice is that we have the
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 Production channel, 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
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:
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-fab button. 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 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
git checkout production
Now, merge the changes from
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:
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. Feel free to provide any feedback and stay tuned for more content on Ionic, Angular and Web development.