Jenkins Pipeline for Ionic and Angular with Github and Bitbucket

Ionic is one of the best mobile app development frameworks available in the market today. Most of the organizations in recent world are using Jenkins as a great tool for automating build processes, continuous integration and automated deployment. Jenkins helps organizations automate every aspect of the development and save the developers precious time. This post also demonstrates how to use GitHub and Bitbucket pipeline for continuous integration and deployment of Ionic app.

Jenkins Pipeline for Ionic with Bitbucket

Why Bitbucket?
In recent days, number of GitHub users are migrating their repositories to Bitbucket. Users can get everything they had on Github in Bitbucket with many other options like private repositories with limited space. Bitbucket has a pipeline to process built-in continuous integration and delivery and it also has better mirroring. This article explains the power of Jenkins for building and deploying iOS apps using Bitbucket pipeline.

Video Tutorial - Jenkins Pipeline for Ionic and Angular with Github and Bitbucket

Ionic Jenkins PipelineDownload this project on Github

Jenkins Installation
Download Jenkins software from https://jenkins.io/download/

Give read and write permissions to secrets folder. You will a jenkin admin password.

Install default plugins.

Setup admin password.

If you want you can modify the server port.

Now ready to use Jenkins.

Ionic Setup

$ sudo npm install -g ionic cordova

Create and Launch an Ionic Project
Here ionic new command will take care the project dependency files. Use ionic serve command to launch the application.

$ ionic start ionicJenkins tabs

$ cd ionicJenkins

$ ionic serve

Ionic Project Stages
You have to implement the following stages for Ionic or Angular project to automate the process. You can ignore Web Build, if you do not want to publish on the website.

Stage 1 - NPM Install
Downloading the node dependencies.

$ npm install

Stage 2 - iOS Build
Ionic iOS build, this is only for Mac users.

$ ionic cordova build ios --release

Stage 3 - Android Build
Android build for release. Make sure install Android Studio with all dependencies

$ ionic cordova build android --release

Stage 4 - APK Sign
Signing the APK file. I will explain more in my upcoming article.

$ jarsigner -storepass your_password -keystore keys/yourkey.keystore platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk nameApp

Stage 5- Web Build (Angular Project)
Web distribution folder build

$ npm run build --prod

Stage 6 - Firebase Deployment
Firebase cloud deployment, understand more about Angular project deployment on Firebase

$ firebase deploy --token "YourTokenKey"

Jenkins Pipeline file
Create a pipeline file with name Jenkinsfile without any file extension. Use vi command on terminal or cmder(Windows)

$ vi Jenkinsfile

Jenkinsfile
Include all the stages on Jenkins pipeline.

pipeline {

agent any

environment {

PATH='/usr/local/bin:/usr/bin:/bin'

}

stages {

stage('NPM Setup') {

steps {

sh 'npm install'

}

stage('IOS Build') {

steps {

sh 'ionic cordova build ios --release'

}

stage('Android Build') {

steps {

sh 'ionic cordova build android --release'

}

stage('APK Sign') {

steps {

sh 'jarsigner -storepass your_password -keystore keys/yourkey.keystore platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk nameApp'

}

stage('Stage Web Build') {

steps {

sh 'npm run build --prod'

}

stage('Publish Firebase Web') {

steps {

sh 'firebase deploy --token "Your Token Key"'

}

stage('Publish iOS') {

steps {

echo "Publish iOS Action"

}

stage('Publish Android') {

steps {

echo "Publish Android API Action"

}

Create New Pipeline Item
Jenkins menu click New Item and give the name.

Multibranch Pipeline
This option comes with default Jenkins file configuration. If this options is not available go to Manage Jenkins and search and install Multibranch Plugin

Branch Source
Here select your branch source like Github, Bitbucket etc.

Add Credentials
Configure with your repository credentials.

Add Owner
Owner as your repository username. This will promote with all of your repository details. Now choose your development Jenkins file branch