Continuous Integration for Ionic Apps

Ionic Framework

Ionic is a complete open-source SDK for hybrid mobile app development. Built on top of AngularJS and Apache Cordova, Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova. —Source

In this post we will show you how to set up Continuous Integration for Ionic builds in just a few clicks using Nevercode.

Let’s get started!

First steps

First, create a free account at Nevercode. All you need to get started is a web browser and no additional software. Nevercode detects and configures your Ionic projects automatically.

The first time you log in to Nevercode you’ll be presented with an empty dashboard.

Empty Dashboard

Get started by clicking on “add new app”.
Enter your Git repository URL and select an authentication type. If you sign up via Bitbucket or Github using OAuth, you can simply select the repository via UI.

Otherwise, you have three options for authentication:

  • public repository
  • username and password
  • SSH key

Select Configuration

In the next step you need to select the branch from the dropdown. (Note that you can change the branch later.) Nevercode will clone the repository, look for projects from it and search for the configurations. All these actions can be monitored at the same time from your browser via the live log window as seen below.

Selecting configuration

When the scanning completes you’ll be presented with three options:

  • Project: directory where your Ionic configuration file config.xml stored
  • Configurations: choose whether to build debug or release version of your application
  • Build for Platforms: choose whether you’d like to build your app for just Android or iOS, or both platforms.

Now click ‘Save and start build’,
Nevercode will automatically run the first build of your Ionic project. Done!

Advanced Settings

Nevercode’s advanced settings enable you to fine-tune building your Ionic app.

Dependency management

Usually Ionic applications depend on additional Node modules. Nevercode installs the dependencies listed out in your project’s package.json file automatically with npm install right after your repository is cloned for building.

Dependency Caching

Dependency caching allows to speed up builds by storing project dependencies. If enabled the package with cached dependencies will be set up before each build.

Code signing

By default code signing is deactivated so you can test drive Nevercode without any hassle with provisioning profiles and signing certificates. But when the time comes to deploy apps or install on test real device we got your back with simple guides on signing Android and iOS binaries.

Testing Ionic Applications

Ionic applications can be tested via custom testing steps. Using custom scripts, you can set up and run any testing framework of your choice as part of your project builds. As long as the test results are reported in the xUnit XML format and directed to the folder specified by our environment variable, Nevercode will parse them, take them into account when setting your build’s status, and display them in the tests tab of the build view.

Unfortunately, the hybrid ecosystem does not have well-defined standards for how tests are written, where they are placed within the project structure, what testing framework they use or how they are run. Given such endless possibilities, any attempt at complete automation was bound to come up short and leave many users frustrated. Luckily, setting up custom tests with Nevercode is quite easy.

Setting up Custom Tests
The first step of the setup is to ensure that all of your testing dependencies are available in the build sandbox. We are including Jasmine, Karma-CLI, Protractor, Chrome and Firefox out of the box.

  1. The most natural way to install other testing components is via a custom post-clone script, which you may well be using already to install your cross-platform app’s other dependencies.
  2. Next, configure your test runner of choice to output its results in the xUnit format to the location specified by the $NEVERCODE_XUNIT_RESULTS_DIR environment variable.
  3. Finally, include a post-build script with the commands necessary to run your tests automatically.

With these simple steps out of the way, your custom tests will be executed during the next successful build. Nevercode will then show the testing results in the Tests tab of the build info screen and will take them into account when determining the build’s final status. For a detailed walk-through on testing hybrid applications please refer to our dedicated guide.

Test Results of an Ionic Applications

Build Distribution

Build distribution is an integral part of app development life cycle. Nevercode supports publishing your build artifacts to several distribution channels such as:

  • Google Play, iTunes Connect
  • HockeyApp, Crashlytics, TestFairy, Relution
  • Slack, HipChat, Email

Let’s take a look at the example of publishing to Google Play. First navigate to the project’s settings and select Publishing, then Google Play from the displayed list. The only thing that you have to do now in order to publish automatically to Google Play is to provide your credentials as a JSON file, select a track and save.

That’s it!

Publishing

NB: To fully automate your continuous integration process you can setup different workflows for each branch describing how your project should be built, tested and published.

Conclusion

Ionic is great choice for mobile application development — there are many good reasons to use it in your next project such as:

  • Cross-Platform (Web, iOS, Android)
  • One codebase
  • Web technologies (HTML, CSS, JS)
  • Open Source & Free
  • Availability of plugins (e.g. Cordova plugins)
  • Great default UI components

Combining Ionic with continuous integration & delivery, is where it really starts to shine and provide great business value and higher productivity. The beauty of Nevercode is that it’s dead simple to set up and does not require a special force of DevOps engineers such as Jenkins.

Leave a Reply

Your email address will not be published. Required fields are marked *