Jenkins Pipeline for Ionic and Angular with Github and Bitbucket
Wall Script
Wall Script
Monday, August 13, 2018

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



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

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

Install default plugins.
Jenkins Pipeline for Ionic with Bitbucket

Setup admin password.
Jenkins Pipeline for Ionic with Bitbucket

If you want you can modify the server port.
Jenkins Pipeline for Ionic with Bitbucket

Now ready to use Jenkins.
Jenkins Pipeline for Ionic with Bitbucket

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.
Jenkins Pipeline for Ionic with Bitbucket

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.
Jenkins Pipeline for Ionic with Bitbucket

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
Jenkins Pipeline for Ionic with Bitbucket

Branch Source
Here select your branch source like Github, Bitbucket etc.
Jenkins Pipeline for Ionic with Bitbucket

Add Credentials
Configure with your repository credentials.
Jenkins Pipeline for Ionic with Bitbucket

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

Build Configuration
If your Jenkins file is in different location, change the path here and save the pipeline
Jenkins Pipeline for Ionic with Bitbucket

Scanning The Branch Index
Jenkins will scan your repository branches
Jenkins Pipeline for Ionic with Bitbucket

Pipeline
Pipeline branch has been created. You can click on the branch name and run the build.
Jenkins Pipeline for Ionic with Bitbucket

Run Build Now
Right menu hit the build now link
Jenkins Pipeline for Ionic with Bitbucket

Pipeline Stages
Jenkins Pipeline for Ionic with Bitbucket

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

11 comments:

mailxengine Youtueb channel
Make in India
X