Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

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:

Building Better Ionic Apps With Ionic Pro, Part 4 -- Ionic Dashboard Setup

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

Building Better Ionic Apps With Ionic Pro, Part 4 -- Set Up Deploy
Choosing a channel to set up deploy

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

Building Better Ionic Apps With Ionic Pro, Part 4 -- Update Method
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:

Building Better Ionic Apps With Ionic Pro, Part 4 -- Copying Plugin Code
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:

Building Better Ionic Apps With Ionic Pro, Part 4 -- Cordova Plugin
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 Production channel, click Settings, enter production as the branch, and hit Save Channel:

Building Better Ionic Apps With Ionic Pro, Part 4 -- production

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:

Building Better Ionic Apps With Ionic Pro, Part 4 -- New Build

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

Building Better Ionic Apps With Ionic Pro, Part 4 -- 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-fab button. Quick recap: here’s what the current home page looks like:

Building Better Ionic Apps With Ionic Pro, Part 4 -- Before

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

<button id="home-button1">
 Add Note
</button>

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

 <button></button>

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:

Building Better Ionic Apps With Ionic Pro, Part 4 -- After

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

Building Better Ionic Apps With Ionic Pro, Part 4 -- 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:

Building Better Ionic Apps With Ionic Pro, Part 4 -- Roll Back Previous Build

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. Feel free to provide any feedback and stay tuned for more content on Ionic, Angular and Web development.

Posted in Application Development
Share this

Ahsan Ayaz

Ahsan Ayaz is a Google Developer Expert in Angular. During his time at Modus, Ahsan worked as a Software Architect. Apart from building web and hybird-mobile apps based on Angular, Ionic & MEAN Stack, Ahsan contributes to open-source projects, speaks at events, writes articles and makes video tutorials.
Follow

Related Posts

  • Building Better Ionic Apps with Ionic Pro
    Building Better Ionic Apps with Ionic Pro, Part 2

    In Part 1 of this series, we created a rapid prototype using Ionic Creator. In…

  • Building Better Ionic Apps with Ionic Pro
    Building Better Ionic Apps with Ionic Pro, Part 1

    With the technology shift in the modern era of computation, over 44 percent of the…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
IT modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Careers
  • Let’s talk
  • EN
  • FR