Thanks! We'll be in touch in the next 12 hours
Oops! Something went wrong while submitting the form.

How to Write Jenkinsfile for Angular and .Net Based Applications

Ismail Raaj

Cloud & DevOps

If you landed here directly and want to know how to setup Jenkins master-slave architecture, please visit this post related to Setting-up the Jenkins Master-Slave Architecture.

The source code that we are using here is also a continuation of the code that was written in this GitHub Packer-Terraform-Jenkins repository.

Creating Jenkinsfile

We will create some Jenkinsfile to execute a job from our Jenkins master.

Here I will create two Jenkinsfile ideally, it is expected that your Jenkinsfile is present in source code repo but it can be passed directly in the job as well.

There are 2 ways of writing Jenkinsfile - Scripted and Declarative. You can find numerous points online giving their difference. We will be creating both of them to do a build so that we can get a hang of both of them.

Jenkinsfile for Angular App (Scripted)

As mentioned before we will be highlighting both formats of writing the Jenkinsfile. For the Angular app, we will be writing a scripted one but can be easily written in declarative format too.

We will be running this inside a docker container. Thus, the tests are also going to get executed in a headless manner.

Here is the Jenkinsfile for reference.

Here we are trying to leverage Docker volume to keep updating our source code on bare metal and use docker container for the environments.

Dissecting Node App's Jenkinsfile

  1. We are using CleanWs() to clear the workspace.
  2. Next is the Main build in which we define our complete build process.
  3. We are pulling the required images.
  4. Highlighting the steps that we will be executing.
  5. Checkout SCM: Checking out our code from Git
  6. We are now starting the node container inside of which we will be running npm install and npm run lint.
  7. Get test dependency: Here we are downloading chrome.json which will be used in the next step when starting the container.
  8. Here we test our app. Specific changes for running the test are mentioned below.
  9. Build: Finally we build the app.
  10. Deploy: Once CI is completed we need to start with CD. The CD itself can be a blog of itself but wanted to highlight what basic deployment would do.
  11. Here we are using Nginx container to host our application.
  12. If the container does not exist it will create a container and use the "dist" folder for deployment.
  13. If Nginx container exists, then it will ask for user input to recreate a container or not.
  14. If you select not to create, don't worry as we are using Nginx it will do a hot reload with new changes.

The angular application used here was created using the standard generate command given by the CLI itself. Although the build and install give no trouble in a bare metal some tweaks are required for running test in a container.

In karma.conf.js update browsers withChromeHeadless.

Next in protractor.conf.js update browserName with chrome and add

CODE: https://gist.github.com/velotiotech/24141b23b4efe7982960432bdf9f05a0.js

That's it! And We have our CI pipeline setup for Angular based application.

Jenkinsfile for .Net App (Declarative)

For a .Net application, we have to setup MSBuild and MSDeploy. In the blog post mentioned above, we have already setup MSBuild and we will shortly discuss how to setup MSDeploy.

To do the Windows deployment we have two options. Either setup MSBuild in Jenkins Global Tool Configuration or use the full path of MSBuild on the slave machine.

Passing the path is fairly simple and here we will discuss how to use global tool configuration in a Jenkinsfile.

First, get the path of MSBuild from your server. If it is not the latest version then the path is different and is available in Current directory otherwise always in <version> directory.</version>

As we are using MSBuild 2017. Our MSBuild path is:

C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin

Place this in /configureTools/ —> MSBuild

Jenkinfile 1.png

Now you have your configuration ready to be used in Jenkinsfile.

Jenkinsfile to build and test the app is given below.

As seen above the structure of Declarative syntax is almost same as that of Declarative. Depending upon which one you find easier to read you should opt the syntax.

Dissecting Dotnet App's Jenkinsfile

  1. In this case too we are cleaning the workspace as the first step.
  2. Checkout: This is also the same as before.
  3. Nuget Restore: We are downloading dependent required packages for both PrimeService and PrimeService.Tests
  4. Build: Building the Dotnet app using MSBuild tool which we had configured earlier before writing the Jenkinsfile.
  5. UnitTest: Here we have used dotnet test although we could've used MSTest as well here just wanted to highlight how easy dotnet utility makes it. We can even use dotnet build for the build as well.
  6. Deploy: Deploying on the IIS server. Creation of IIS we are covering below.

From the above-given examples, you get a hang of what Jenkinsfile looks like and how it can be used for creating jobs. Above file highlights basic job creation but it can be extended to everything that old-style job creation could do.

Creating IIS Server

Unlike our Angular application where we just had to get another image and we were good to go. Here we will have to Packer to create our IIS server. We will be automating the creation process and will be using it to host applications.

Here is a Powershell script for IIS for reference.

CODE: https://gist.github.com/velotiotech/f9a46ee3265594110c86379ca32fa898.js

We won't be deploying any application on it as we have created a sample app for PrimeNumber. But in the real world, you might be deploying Web Based application and you will need IIS. We have covered here the basic idea of how to install IIS along with any dependency that might be required.

Conclusion

In this post, we have covered deploying Windows and Linux based applications using Jenkinsfile in both scripted and declarative format.

Thanks for Reading! Till next time...!!

Get the latest engineering blogs delivered straight to your inbox.
No spam. Only expert insights.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Did you like the blog? If yes, we're sure you'll also like to work with the people who write them - our best-in-class engineering team.

We're looking for talented developers who are passionate about new emerging technologies. If that's you, get in touch with us.

Explore current openings

How to Write Jenkinsfile for Angular and .Net Based Applications

If you landed here directly and want to know how to setup Jenkins master-slave architecture, please visit this post related to Setting-up the Jenkins Master-Slave Architecture.

The source code that we are using here is also a continuation of the code that was written in this GitHub Packer-Terraform-Jenkins repository.

Creating Jenkinsfile

We will create some Jenkinsfile to execute a job from our Jenkins master.

Here I will create two Jenkinsfile ideally, it is expected that your Jenkinsfile is present in source code repo but it can be passed directly in the job as well.

There are 2 ways of writing Jenkinsfile - Scripted and Declarative. You can find numerous points online giving their difference. We will be creating both of them to do a build so that we can get a hang of both of them.

Jenkinsfile for Angular App (Scripted)

As mentioned before we will be highlighting both formats of writing the Jenkinsfile. For the Angular app, we will be writing a scripted one but can be easily written in declarative format too.

We will be running this inside a docker container. Thus, the tests are also going to get executed in a headless manner.

Here is the Jenkinsfile for reference.

Here we are trying to leverage Docker volume to keep updating our source code on bare metal and use docker container for the environments.

Dissecting Node App's Jenkinsfile

  1. We are using CleanWs() to clear the workspace.
  2. Next is the Main build in which we define our complete build process.
  3. We are pulling the required images.
  4. Highlighting the steps that we will be executing.
  5. Checkout SCM: Checking out our code from Git
  6. We are now starting the node container inside of which we will be running npm install and npm run lint.
  7. Get test dependency: Here we are downloading chrome.json which will be used in the next step when starting the container.
  8. Here we test our app. Specific changes for running the test are mentioned below.
  9. Build: Finally we build the app.
  10. Deploy: Once CI is completed we need to start with CD. The CD itself can be a blog of itself but wanted to highlight what basic deployment would do.
  11. Here we are using Nginx container to host our application.
  12. If the container does not exist it will create a container and use the "dist" folder for deployment.
  13. If Nginx container exists, then it will ask for user input to recreate a container or not.
  14. If you select not to create, don't worry as we are using Nginx it will do a hot reload with new changes.

The angular application used here was created using the standard generate command given by the CLI itself. Although the build and install give no trouble in a bare metal some tweaks are required for running test in a container.

In karma.conf.js update browsers withChromeHeadless.

Next in protractor.conf.js update browserName with chrome and add

CODE: https://gist.github.com/velotiotech/24141b23b4efe7982960432bdf9f05a0.js

That's it! And We have our CI pipeline setup for Angular based application.

Jenkinsfile for .Net App (Declarative)

For a .Net application, we have to setup MSBuild and MSDeploy. In the blog post mentioned above, we have already setup MSBuild and we will shortly discuss how to setup MSDeploy.

To do the Windows deployment we have two options. Either setup MSBuild in Jenkins Global Tool Configuration or use the full path of MSBuild on the slave machine.

Passing the path is fairly simple and here we will discuss how to use global tool configuration in a Jenkinsfile.

First, get the path of MSBuild from your server. If it is not the latest version then the path is different and is available in Current directory otherwise always in <version> directory.</version>

As we are using MSBuild 2017. Our MSBuild path is:

C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin

Place this in /configureTools/ —> MSBuild

Jenkinfile 1.png

Now you have your configuration ready to be used in Jenkinsfile.

Jenkinsfile to build and test the app is given below.

As seen above the structure of Declarative syntax is almost same as that of Declarative. Depending upon which one you find easier to read you should opt the syntax.

Dissecting Dotnet App's Jenkinsfile

  1. In this case too we are cleaning the workspace as the first step.
  2. Checkout: This is also the same as before.
  3. Nuget Restore: We are downloading dependent required packages for both PrimeService and PrimeService.Tests
  4. Build: Building the Dotnet app using MSBuild tool which we had configured earlier before writing the Jenkinsfile.
  5. UnitTest: Here we have used dotnet test although we could've used MSTest as well here just wanted to highlight how easy dotnet utility makes it. We can even use dotnet build for the build as well.
  6. Deploy: Deploying on the IIS server. Creation of IIS we are covering below.

From the above-given examples, you get a hang of what Jenkinsfile looks like and how it can be used for creating jobs. Above file highlights basic job creation but it can be extended to everything that old-style job creation could do.

Creating IIS Server

Unlike our Angular application where we just had to get another image and we were good to go. Here we will have to Packer to create our IIS server. We will be automating the creation process and will be using it to host applications.

Here is a Powershell script for IIS for reference.

CODE: https://gist.github.com/velotiotech/f9a46ee3265594110c86379ca32fa898.js

We won't be deploying any application on it as we have created a sample app for PrimeNumber. But in the real world, you might be deploying Web Based application and you will need IIS. We have covered here the basic idea of how to install IIS along with any dependency that might be required.

Conclusion

In this post, we have covered deploying Windows and Linux based applications using Jenkinsfile in both scripted and declarative format.

Thanks for Reading! Till next time...!!

Did you like the blog? If yes, we're sure you'll also like to work with the people who write them - our best-in-class engineering team.

We're looking for talented developers who are passionate about new emerging technologies. If that's you, get in touch with us.

Explore current openings