Building Ionic apps

Setting up Ionic apps in Nevercode

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 Cordova1.

This tutorial guides you through setting up your Ionic app in Nevercode. Nevercode doesn't require any kind of additional software from your side and you don’t even have to write any tedious configuration files full of technical boilerplate. We’ll scan your repository and from what you have there our builders find everything they need. You’ll just have to confirm what configuration you want to build.

The guide covers how to:

Ionic project structure

To identify an app as Ionic, Nevercode looks for a "signature" comprised of 2 components. Note that for Ionic 2 both these steps are generated automatically when you add a new app with ionic start command. If apps are created with older Ionic versions, you'd need to provide one extra step.

  • Ionic namespace must be correctly specified in the config.xml file in the root folder of your project. Here's what this looks like:
    <widget id="com.your.project" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

  • The presence of the ionic.project or ionic.config.json file in the root folder of you project. This file is not created immediately after a new Ionic one project is started from the CLI. You could add it manually, but even though it’s tiny and simple, why not let Ionic do it for you: just run ionic serve from your project’s folder. This will open a browser window in which you can see your shiny new app, but more importantly, it will create the ionic.project file. Don't forget to add it to source control and commit.

If your project began its life as Ionic, and you've run ionic serve, then everything should be in place. However, users who are converting their existing projects to Ionic (we usually see this with Cordova and PhoneGap projects) need to take extra care to ensure that all these elements of the Ionic "signature" are present and committed to source control before adding their project to Nevercode.

Add a new app

  1. Click Add a new app on Nevercode dashboard.
Nevercode dashboard

Nevercode dashboard

  1. Select the appropriate option for where your app repository is hosted. See Specifying app repository for details. If you choose to add the repository manually, see Defining checkout URL and Authenticating repository access for details.

Define build configuration

After specifying app repository, Nevercode takes a first look at it by listing the branches in this repository. The next step for you is to select the branch you want Nevercode to scan for projects.

  1. Select a branch from the dropdown that Nevercode should scan. Note that you can change the branch later if needed.
  2. Click Scan branch. Nevercode scans the repository from the specified branch. This includes cloning the repository, looking for projects from it and searching for the configurations. All these actions can be monitored real-time from your browser via the live log window.
  3. Once scanning the branch has finished, you need to select a project. The Project selection here means a directory in your repository where your Ionic configuration file config.xml is stored.
  4. Select an option in Configuration dropdown, so Nevercode knows whether to build either the debug or the release version of your app.
  5. Select the platform for which you'd like to build your app (Android or iOS, or both platforms).
Build configuration

Build configuration

  1. Enable the appropriate build options by checking the corresponding boxes.
  2. Finally, click the Save and start build button. Nevercode will start the very first build of your app and you can monitor the real-time logs.

Manage dependencies for Ionic apps

Ionic applications usually 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.

Sign Ionic apps

Signing of Android binaries is identical to how it's done in Cordova apps, for detailed information see Signing Android binaries in Cordova.

To sign iOS binaries, please follow the corresponding tutorial for iOS apps.

Signing configuration in build configuration file

Please note that for iOS applications Nevercode respects the signing configuration provided in the build.json configuration file as described in Cordova documentation. But you'd still have to upload the provisioning profiles and code signing certificates as described in the Code signing section.

Run tests

To enable testing of your Ionic apps, you must set up a custom test step. Please take a look at our in-depth documentation for testing hybrid applications to see how you can set that up.

Set up Git hooks

By setting up Git hooks, you can have Nevercode automatically build your app every time you push changes to the repository. For instructions, please refer to Building automatically (Git hooks).

Publish your build artefacts

Nevercode supports publishing your build artefacts to several distribution channels. See our full list of supported distribution options for more information.

If you'd like to generate a release build of your app for publishing to the Apple App Store, there are a few additional steps you need to take. These are detailed in Ionic documentation.

Manage build versions

To make your build version management easy, Nevercode exports two environment variables that you can use in your build scripts: NEVERCODE_BUILD and NEVERCODE_BUILD_NUMBER. You can read more about it from Incrementing Ionic app version.

Building Ionic apps

Setting up Ionic apps in Nevercode