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:

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.