At Agira, Technology Simplified, Innovation Delivered, and Empowering Business is what we are passionate about. We always strive to build solutions that boost your productivity.

Continuous Integration With Jenkins For MEAN Stack App

  • By Bharanidharan Arumugam
  • September 19, 2017
  • 1081 Views

Introduction:

Jenkins is continuous integration tool that can automate our development process. This article will explain why we need to use Jenkins, installation of Jenkins, configuring Jenkins, and creating our first project. First, we need to setup the basics, and then we will see how we need to setup MEAN stack app in order to integrate unit and functional test cases, and how to do this continuous integration with Jenkins.

Why do we need to use Jenkins?

It is obvious that generally a project is developed by a team of many members, and not by a single person. So processes like Merging code, Release Coordination, Determining the build status, Maintaining all the updates can be difficult.

In this difficult situations, Jenkins helps us to automate everything. Jenkins being a solution for continuous integration merges all code continuously into one central build. Therefore, we are going to perform continuous integration with Jenkins. Jenkins by monitoring, regulating, comparing, merging and maintaining your project acts as your projects headquarters.

The core functionalities of Jenkins are automated integration and external build monitoring. It not only makes it easy for us to maintain the code but also monitor our builds and ensures that other developers merge their code before the code gets ready.

Let’s set up and learn Jenkins and how to use it.

Pre-requisites:

  • You should have the VPS running and you should log-in as root.
  • I wrote this article for Ubuntu 14.04 x64, but the same instructions will work for Ubuntu 12.04 and up.
  • Web server – nginx
  • Java at least 1.8 for functional testing using selenium web driver

Installing Jenkins:

Customize Jenkins
Before installing the Jenkins, We the following two steps have to be done to add key and source list to apt.

  1. Adding the key.
wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | apt-key add -

 

2. Creating the sources list.

sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'

 

After updating the apt’s cache, we can install Jenkins now.

$ sudo apt-get update
$ sudo apt-get install Jenkins
$ sudo service Jenkins status

 


Now the Jenkins is run, go to
http://ip-of-your-machine:8080. We will now be able to see a default Jenkins screen. We can log in with help of “admin” user credentials

Suppose if you want to create “one more user”, you can create a user with help of Manage Jenkins -> Manage Users option from Jenkins admin dashboard.

Manage Jenkins Plugins:

Once we install the Jenkins and configure it, We need to install the right plugins that suit our project needs. For installing and managing the plugins follow the below steps.
Inside the menu, Click on Manage Jenkins and in the sub Menu click on Manage Plugins. By clicking on the link you land on a page where the list of all previously installed plugins are available and needs to be updated. You just have to click on update button given at the bottom to update the plugins.
To view the list of all the available plugins click on Available button on the same page. This shows you the list of all the available plugins. The challenge you face now is to select the right ones for your project. You can refer Jenkins wiki for this purpose, it provides a good summary of each available plugin making it easy to select the right plugin for our needs.

Here are a few, some generic, some specific to the app:

  • Git plugin
  • Jenkins Disk Usage
  • Node js

After selecting the right plugins. Click on Download now and install after the restart button.

Creating Project and schedule build:

Now that everything is up and running, it’s time to create our first project.

  1. General: Click the New Item link and create a freestyle project with project name
  1. Source code management: Fill source code management details like Git credentials to access our project repo
  1. Schedule build trigger methods in any of the following:
    • Trigger builds remotely (e.g., from scripts)
    • Build after other projects are built
    • Build periodically
    • Periodically need to trigger, GitHub hook trigger for GITScm polling
    • Poll SCM
  1. Setup build environment: We build env for MEAN application, so we need to configure Node & npm details
  1. Execute Shell script: Add a execute shell script to run our unit test cases
#!/bin/bash
echo "---------------------------START OF BUILD---------------------------------------------------"
echo $PWD
cp ../.env .
npm install
npm test
echo "---------------------------------END OF BUILD-------------------------------------------------"

 

Click the Save button at the bottom of the screen. Then click the “Build Now” button in the project dashboard.

  1. Build output: Once setup is done, We can able to see build output continuously in Jenkins dashboard.

Install Protractor and Selenium WebDriver for functional testing:

Protractor is an end-to-end test framework for AngularJS applications. Follow below steps to install protractor and selenium web driver:

$ sudo su - jenkins
$ npm install protractor -g
$ webdriver-manager update
$ ln /usr/lib/node_modules/protractor/selenium/chromedriver /usr/bin/chromedriver
$ exit

 


Setup Headless Chrome browser

Follow below steps to setup headless chrome browser:

$ echo "deb http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee -a /etc/apt/sources.list
$ wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
$ sudo apt-get update
$ sudo apt-get install libxpm4 libxrender1 libgtk2.0-0 libnss3 libgconf-2-4
$ sudo apt-get install google-chrome-stable
$ sudo apt-get install xvfb gtk2-engines-pixbuf
$ sudo apt-get install xfonts-cyrillic xfonts-100dpi xfonts-75dpi xfonts-base xfonts-scalable
$ sudo apt-get install imagemagick x11-apps

 


To launch the web driver with Xvfb at backend

Script is present in /etc/init.d/selenium:

#!/bin/sh
Xvfb -ac :99 -screen 0 1280x1024x16 &
#disown $1
export DISPLAY=:99
webdriver-manager start /dev/null 2>&1

 

Execute this script and verify the service on Port. Xvfb may be useful for other browser dependent applications in non-GUI mode.

Add a execute shell script to run our functional test cases

In Post Build section, add below script to execute end to end functional testing using protractor:

cd application path
protractor protractor_conf.js

 


Conclusion:

Hope this helps you to integrate unit and functional testing of MEAN stack application, and thereby perform continuous integration with Jenkins. Enjoy JENKINS!!

Bharanidharan Arumugam

Technical Architect | Tech Lead | Mentor | - An enthusiastic & vibrant Full stack developer has 7 plus years of experience in Web development arena. Owns legitimate knowledge in Ruby, Ruby On Rails, AngularJs, NodeJs, MEAN Stack, CMS Services. Apart all, A Modest human who strictly says "No To Harming Humans".