How to Build Angular Application in jenkins ?

Jenkins is a popular tool for Continuous Integration. Using Jenkins, we can externalize the build process for our code. It allows teams to collaborate more efficiently and deliver software in shorter cycles. In this article, we will learn how to build an angular app in Jenkins.

Pre-Requisites

Clone the Code By using the below link.

“https://github.com/StellarStrategist/jenkins-angular.git”

Step 1: Install NodeJS on your system

For the purpose of this tutorial, I have a NodeJS installed on my Windows machine.

Step 2: Create a new Angular Project

Open the terminal on your machine and type the following command:

ng new my-angular-app

This command creates a new angular project on your machine by the name of my-angular-app. Choose any routing and styling settings you want and generate. Remember the directory where you have created this project. Leave it as it is for now.

Step 3: Install Jenkins on your system

Next, please make sure you have Jenkins up and running on Linux. There are many ways to use Jenkins depending on your needs. For this tutorial, I have set up Jenkins using a virtual machine. To learn how to install Ubuntu in a virtual box click here. Then, please refer to the following links to install Jenkins.

Step 4: Add Jenkinsfile to your project

Now, open the project you created earlier in your IDE and create folder called Jenkins inside the root directory of your project. Create another folder called scripts inside this folder. This folder will hold our bash scripts.

Create two text files inside this folder called deliver.sh and kill.sh.

The content for deliver.sh will be as follows:

#!/usr/bin/env sh

npm run ng build
npm run ng serve &
sleep 1
echo $! > .pidfile

echo 'Now...'
echo 'Visit http://localhost:4200 to see your Node.js/Angular application in action.'

This script is responsible for building and serving your angular application.

The content for kill.sh will be as follows:

#!/usr/bin/env sh

kill $(cat .pidfile)

This script will properly close down your angular application.

Now create another file in the root directory of your project called the Jenkinsfile. This file will contain all the settings that jenkins will read from when it fetches code from GitHub.

The content of Jenkinsfile is as follows:

pipeline {
    agent any
    tools {nodejs "NODEJS"}
    stages {
        stage('Build') {
            steps {
                sh 'npm install'
            }
        }
        stage('Deliver') {
            steps {
                sh 'chmod -R +rwx ./jenkins/scripts/deliver.sh'
                sh 'chmod -R +rwx ./jenkins/scripts/kill.sh'
                sh './jenkins/scripts/deliver.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }
    }
}

Make sure that your directory structure matches the following:

Directory Structure

Step 5: Upload Code to GitHub

Create a git repository and set it up to hold with your angular code. For the purpose of this tutorial, please keep the repository as public.

Now we will see how to build our angular application using Jenkins.

Step 6: Install Git in your Linux Environment

Git is necessary for communication between GitHub and Jenkins. To install git in Ubuntu, run the following command in your terminal:

sudo apt install git-all

How to build angular application using Jenkins?

Step 1: Install the plugin support for Jenkins

Open your Jenkins dashboard and on the side panel, click on manage Jenkins:

After this, click on plugins:

Now, click on the Available plugins option:

Type NodeJS in the search box and click install for the following plugin:

After the plugin has installed, click on the following option:

This takes you back to the manage Jenkins page.

Step 2: Configure the tool setup in Jenkins

Now, click on the Tools option on the Manage Jenkins page:

Scroll to the Section of NodeJS and click on the Add NodeJS button:

This will option the following form, fill it according to the image provided:

Make sure that the Name is exactly the same as in the image, otherwise Jenkins will not be able to build your project. Now we will create our Jenkins job to build our angular application.

Step 3: Create a new Jenkins Job

In your dashboard click on the create a job option:

type a name for your pipeline and click on pipeline and click OK:

Enter some description for your pipeline if you want:

Go to your GitHub repository and copy the public URL of your project:

Now configure pipeline settings as follows:

Specify the name of the branch you want to build and the path to the Jenkinsfile. Then click on save:

Step 4: Build your Project

Proceed to the homepage of your job and click on build-now:

The build progress appears in the side navigation bar along with the build number as follows:

Click on the build number. This will allow you to view everything about the current build. On left hand side, click on the ‘View-Console’ option as follows:

Now, you will be able to see the entire build process as it happens. Wait till you the message ‘your application is live on port 4200’. When you see this, visit http://localhost:4200 in your browser. You will see that your angular application is running through the Jenkins pipeline which you have created. In case you don’t see the output, wait for sometime and reload the page.

This will take you to your angular application as:

When you have completed using your page, head to the view-console page and click on the ‘Proceed’ button as follows:

Output

Upon clicking the proceed button, your kill.sh file is run by Jenkins. This stops the angular application from running and you can see the message ‘Finished: SUCCESS’ on your console as follows:

This indicates that the build was a success.

Conclusion

In this article we covered a lot of things. We setup our computer to build our projects using Jenkins and also learnt how we can do so through Virtual machine. We hosted our code on a source code manager and externalized our build process using Pipeline-as-a-code. The code we wrote for our file was in the form of a bash script. Next, we viewed our running application and afterwards, we successfully stopped the process and completed our build. That were indeed a lot of things. If you faced any unwanted errors, please feel free to discuss in the comments below.

Build angular application in jenkins – FAQ’s

Can I use any other scripts other than bash?

Yes, if you know how to write scripts in shell or python then please do so. But please remember that the underlying operating system should have the support for that terminal. For example PowerShell for windows or zsh for MacOS.

Can I use my local NodeJS installation?

Yes, just remember to point to it while setting up your tools.

I don’t have Ubuntu. How can I run bash scripts?

If you don’t have Ubuntu then you can run it using a virtual machine technology like VMWare or Oracle VirtualBox. Visit this page to learn how to setup virtual machine. Ubuntu is an excellent choice for beginners and has extensive community support too.

Article Tags :

DevOps

Jenkins