This post will help you to understand and set up Continuous integration with CircleCI for IONIC mobile apps.

I have been playing around for the last month or two on various projects and wanted to share what I have learned during that time and different online tools to setup Continous integration for IONIC mobile apps. I have tried with Ionic app flow, CircleCI, and Fastlane. I found CircleCI 2.0 is much easier and cost effective than other two services.

In this post, we will discuss the CircleCI setup with ionic apps with ANDROID build.

Get started 

First, create an IONIC project using the command line. In case if you`re not familiar with IONIC command line, please check this link IONIC-CLI

ionic start circleci-ionic
cd circleci-ionic

To run the project in the browser

ionic serve

Configuring CircleCI

We will use CircleCI 2.0 since it got a good upgrade for all dependencies mobile SDK and ionic dependencies. If you`re new to CircleCI, i strongly recommend to go through official document CircleCI Documentation

Step 1. Create a folder in your project root directory with .circle

Step 2. Create file config.yml under .circle folder

or

You can run a simple command in terminal

mkdir .circleci && touch ./circleci/config.yml

Step 3. With CircleCi you can create jobs for every task in the sequence like downloading dependencies, installing required setup files, test cases, generating build and storing in the artifacts

Since we are using CircleCI 2.0 version, we will define as below in the starting of the configuration file

version: 2

Underneath, you will define all the jobs required to in your repo.

version: 2
jobs:
  build:
    docker:
      - image: beevelop/ionic // this will setup ionic for your docker 
    steps:
      - checkout // it will fetch the code from github or bitbucket
      - run:
          name: Install node modules // installing all the node dependecies for your project
          command: npm install 
      - run:
          name: Run unit tests // test cases, in case if you have any 
          command: npm test
      - run:
          name: Building android // building platform android to generate apk file
          command: ionic cordova build android
      - store_artifacts:
          path: platforms/android/build/outputs/apk/android-debug.apk // storing the apk file in artifact to download and share with testing team

 

Here you can add multiple other jobs if you wish too. Complete configuration file config.yml

To add Android platform for IONIC project, you will require to setup android environment in your local development and configure global variable ANDROID_HOME with platftoolsools version 19. We will have to do the same procedure for CircleCI docker,

Create a .travis.yml file under your root project folder.

In this file, we will define our OS either Linux or Mac since configurations will be different for every OS.

Here I choose Linux because it comes with free usage. If you wish to use MacOS, it will require to subscribe to a plan

In the .travis.yml, define os and environment version as follows

{ 
   "os": "linux",
   "env": "CXX=g++-4.8",
}

Add required addons for your testing and building the app

{
  "addons": {
    "apt": {
       "sources": ["ubuntu-toolchain-r-test"],
        "packages": ["g++-4.8","openjdk-7-jdk","lib32stdc++6","lib32z1","google-chrome-stable"]
     },
     "chrome": "stable"

}

To install android platform tools and update environment variables for the cordova android build,

{ 
    "before_script": [
       "wget http://dl.google.com/android/android-sdk_r24.4-linux.tgz",
       "tar -xvf android-sdk_r24.4-linux.tgz",
       "echo y | ./android-sdk-linux/tools/android update sdk --no-ui --all --filter platform-tools",
       "echo y | ./android-sdk-linux/tools/android update sdk --no-ui --all --filter build-tools-23.0.2",
       "echo y | ./android-sdk-linux/tools/android update sdk --no-ui --all --filter android-23",
       "echo y | ./android-sdk-linux/tools/android update sdk --no-ui --all --filter extra-android-support",
       "echo y | ./android-sdk-linux/tools/android update sdk --no-ui --all --filter extra-android-m2repository",
       "echo y | ./android-sdk-linux/tools/android update sdk --no-ui --all --filter extra-google-m2repository",
       "export ANDROID_HOME=$PWD/android-sdk-linux",
       "export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools/23.0.2",
       "sudo chown root /opt/google/chrome/chrome-sandbox","sudo chmod 4755 /opt/google/chrome/chrome-sandbox",
       "export CHROME_BIN=chromium-browser",
       "export DISPLAY=:99.0",
       "sh -e /etc/init.d/xvfb start",
       "sleep 10"] 
}

Install the ionic and Cordova to run Cordova build commands

{ 
    "install": [
       "npm install -g gulp bower cordova ionic",
       "npm install",
       "bower update"],
    "node_js": "8.11",
    "language": "node_js",
}

Now we have the environment ready to build the app, add the below commands to build and generate the build for android.

"script": [
   "cordova prepare",
   "npm test",
   "ionic build"
]

To download the complete .travis.yml

Everything ready – at last, we have to set the ports available for docker to run ionic apps.

touch Dockerfile

Add below code to the docker file,

FROM node:9.11.1-alpine
LABEL Name="AppName"
LABEL Version="1"
WORKDIR /App
CMD [ "ionic serve" ]
EXPOSE 8100 // default port for ionic apps
EXPOSE 35729
EXPOSE 53703

Once you have these all above configuration, go to CiricleCI and add your GitHub account. Once it is authenticated –  navigate to the CircleCI web interface, choose Projects and then Add project. Select a project and click Start building.

Try pushing some changes to your repo to see how a JS job runs, and then it will install the dependencies and android SDK get run concurrently. Once it is done, it will generate an APK to download from the artifacts. For more information https://circleci.com/docs/

Wrapup

Now you have seen some of the new firepower that CircleCi 2.0 can provide you with when automating your tests, build, & deployment process.

Link to download same code Github

Leave a comment

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

%d bloggers like this: