Are you keeping up with DevOps in your Ionic project?

November 22, 2018

DevOps is a hot topic in the software industry at the moment, and for good reason. Teams incorporating these practices are more productive, providing more value to the business and end users.

Companies with high performing teams are twice as likely to exceed: 1. profitability, productivity, market share 2. effectiveness and efficiency 3. customer satisfaction ratings 4. achievement of mission goals

Earlier in the week the Ionic team blogged Making the Case for DevOps which was quite timely as soon we will be launching our latest Ionic 4 based starter project called Startup Rocket. A main feature of this starter project is the focus on DevOps throughout the integrated technology stack using GitLab and the Google Cloud Platform.

So what is it exactly? Here’s the description of DevOps from the Microsoft website:

“DevOps is the union of people, process, and products to enable continuous delivery of value to our end users. The contraction of “Dev” and “Ops” refers to replacing siloed Development and Operations to create multidisciplinary teams that now work together with shared and efficient practices and tools. Essential DevOps practices include agile planning, continuous integration, continuous delivery, and monitoring of applications.

When you adopt DevOps practices, you shorten your cycle time by working in smaller batches, using more automation, hardening your release pipeline, improving your telemetry, and deploying more frequently.”

DevOps is a force enabler, putting the automation and process in place that allow your whole team, including less experienced developers, to be more effective. The processes in place increase the rate of features into production and also decreases the impact of issues that occur in production.

Continuous integration

A cornerstone of any good software development process, even before DevOps was a thing, is having a continuous integration (CI) build.

Startup Rocket comes with integration with the GitLab CI service, so every commit builds and tests the code, including running end-to-end integration tests on a dedicated CI environment and even building the Android .apk file.

Multi-environment support

Multiple, disposable, and recreatable environments that are accessible around the globe are a must have for application lifecycle management.

A proper DevOps friendly build/deploy pipeline requires multiple environments, development, CI, QA, production etc. But all your usual Ionic, Firebase and App Engine starter projects only support a single environment/project configuration. Startup Rocket comes with the scripts, code and configuration to support multiple environments with the native app/web/PWA builds, Firebase (push, functions, storage, real-time database and Firestore etc) and Google App Engine project, all configured from a single master configuration file.

For example in the app project you can run npm run serve-dev to build and develop the app (the equivalent to running ionic serve) for your development environment, or npm run serve-prod to have it pointing to your production backend, using URL’s, API tokens and ids etc for that environment.

Similarly for the Firebase and App Engine projects there are npm scripts for performing the build, test and deploy operations for each environment.


The continuous integration support takes things one step further with the ability to manage releases and app store build submissions from named Git branches.

Merge a commit to the branch named android and it’ll be submitted to the Play store (as a beta release by default).

While the GitLab CI runner can’t perform a native iOS build, we have provided a script which is a single command to build and publish an iOS build to the app store.

For the backend code once a new commit to Git has passed its unit and integration tests, merge it to the branch named production. This will to have the server-side components (App Engine, Cloud functions and Firestore configuration) deployed to production, including a build of the web/PWA app.

Need to rollback the server release in a hurry? Simply apply a reverse commit in Git on the production branch and push it.

Unlimited Pro features

Startup Rocket even comes out of the box with some of the features you’ll find Ionic AppFlow (formerly Ionic Pro), but with no limits or restrictions on usage.

First is the app error reporting service, similar to the Ionic Pro app monitoring service. This submits any errors that are logged in the app to the Google Cloud Stackdriver service, which handles logging and error reporting. This means you only have a single service you need to check for your server and app error logs, reducing your operational overhead.

Also the Stackdriver service provides some extremely useful features, such as emailing you the first time a new error occurs. This is handy when you’ve pushed a new build to production where an issue has slipped through testing. Instead of having to wait for when you next check the logs, or if you’re lucky for a customer to let you know, you can be notified as soon as a new error is occurring.

Here’s an example of an email notification from when we were testing moving from the App Engine flex environment to the standard environment.

stackdriver email notification
Clicking through gives you this detailed report on that particular re-occurring error.

stackdriver email notification
A second is to providing a way to link an issue in your issue tracker to the production issue in Stackdriver, closing the loop in the development cycle from production back to your source code.
stackdriver email notification

stackdriver email notification
This is what DevOps is all about, having the right tooling and monitoring/analytics integrated so you can quickly iterate and evolve, knowing you have the tools and process in place to quickly fix any issues when the do arise.

So what could be holding you back from getting some DevOps talent onto your project? The Ionic blog post about DevOps said:

“To add fuel to the fire, all these new “unintentional software companies” are finding themselves competing for the same prized resource: Developers. A recent study conducted by Stripe reports that access to developers is a bigger threat to success than access to capital.

More than that, DevOps engineers are becoming increasingly sought after and are still quite expensive, resulting in them being few and far between.”

Experienced freelance senior developers that can develop high quality architecture and infrastructure code can cost $100/hour and up, which quickly gets expensive. But the Startup Rocket source code gives you the code and documentation to get started properly at a tiny fraction of what it would cost to develop from scratch.

The code for the multi-project support and continuous integration builds has been developed and refined over the last few years in our Cloneder starter project which uses Ionic 3 and the Parse framework running on Google App Engine. This code has been the basis for apps such as “Just A Baby” which has been featured on Fox News, by Whoopi Goldberg on The View and many more.

We’re taking all this experience and channelling it into a new premium Ionic 4 and Firebase with lots of core functionality used across many types of apps. If you’ve built and maintained an Ionic app you’ll know how much work it is. First to integrate all the plugins, libraries, frameworks and SDK’s up-to date, and then dealing with various issues as you try to upgrade to the latest versions. And the time to develop all those little nice-to-have’s which save you even more time in the long run.

You only have to look on the Ionic forum or StackOverflow for the hundreds and thousands of possible issues you might bump your head into. How many hours would you save having a working, continuously tested app with DevOps practices built-in to start from?