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