Continuous integration using Jenkins for .NET and Angular application.

Continuous integration using Jenkins for .NET and Angular application. 

Hey guys couple of days back I tried to setup Jenkins for my project, I struggle a lot because I did not find any blog which explain end to end configuration. So here I am writing this blog which will include end to end configuration. At the end of this blog you will be able to deploy your application to server using Jenkins. 

Continuous Integration

It’s a process in which all the development work integrated as early as possible.

What does that mean or how it can help you?

In easy words it’s a process which saves your time, it automate the build process. In absence of continuous integration  you give manual build and you repeat the same process over and over again, that can leads you to a lot of issues because more human intervention break things. 

Why Jenkins?

Jenkins is the powerful tool (#1 in 2017) for continuous integration. It gives you so many plugins which helps you to automate your build quickly.

What is there for you in this Article?

In this article you will learn how to setup Jenkins for .NET Application i.e. Asp.NET MVC, Web API and angular 2 application. Backup and execute SQL server scripts and a lot more which is necessary for build automation.

Prerequisites

You required following things
  • Visual Studio
  • You should be familiar with deployment process. 

Problem Statement or Scenario

Following are the steps which I follow to deploy my application.

  • Publish Asp.NET MVC or Web API application.
  • Build angular-2 application.
  • Prepare a folder which combines angular2 build files and .NET application’s published/build files.
  • Execute SQL server scripts which has been created while development but before that  
  • Deploy published folder to application to server.

Installing Jenkins

You can download Jenkins from https://jenkins.io/download/ and choose version according to OS you are using. I am going to select windows version.

 

It’s pretty easy to install Jenkins, just hit couple of hits on next button and you are done. After installation setup will open browser and navigate to require URL. In case it does not go to browser, open http://localhost:8080/login?from=%2F.



Additional info: - In case port 8080 is already in use so navigate to “C:\Program Files (x86)\Jenkins” and look for “jenkins.xml” file. Open “jenkins.xml” file and look for --httpPort=8080 and here you can change the port ex. 9000 or as per your convenience. Please refer to following screenshot.

Now follow the instruction and you will be redirected to next page where you will be asked to install plugins I will recommend to install suggested plugins. 


As soon as you click on Install suggested plugins it will show up the next page, where Jenkins will be downloading the plugins. Please refer to screenshot.


After downloading is finished you will be redirected to next page i.e. “Create First Admin User”, where you can create a user. Please refer to following screenshot.


Once you created a user you are done with the setup.

Plugins

Jenkins has already downloaded all the required plugins but as we are trying to build .NET application we will require downloading one more plugin called MSBuild.

Msbuild is responsible to build .Net applications. To download, click on manage Jenkins. Please refer to following screenshot.

 

Then click on Manage plugins. Please refer to following screenshot


Switch to Available tab and in the filter write MSbuild. It will show MSBuild plugin check the checkbox and click on Download now and install after restart. Please refer to following screenshot.

It will navigate you to below page make sure you have enable auto refresh, the link is at the left top.

After installation it will redirect you to login page. Enter your credentials and now you are good to setup your first job.

Your first project – “Create a Job”

To create a new job click on create new jobs or New item in the left menu. Please refer to the screenshot.


Name your project and select “Freestyle project” and then click on OK. Please refer to following screenshot.



After clicking on OK you will be redirected to following page



To make things simple I will not go into details of other options available here. For now just write any description if you want to.

Source Code Management

I will be using SVN to get the latest code. For that enter repository URL.



If specified repo is not accessible publically as mine you need to specify credentials. To add the credentials click on Add->Jenkins and It will open a popup where you need to write your SVN username and password to access specified repository.


Point of interest

Check-out Strategy – We have couple of options here you can select as per your need I am selecting “Use ‘svn update’ as much as possible”.

Build

Before performing any action I advise you to write down all the steps you perform to deploy your application. In this article I am going to perform following steps to deploy my application
  1. Take latest code from SVN.
  2. Publish Web API application.
  3. Build angular 2 application.
  4. Combine angular 2 and web api application’s files in a folder because I host both the files at IIS.
  5. Take backup of database.
  6. Execute scripts if any.
  7. Deploy application to hosting server.
  8. Archive so that it can be used later if required.
Now let’s discuss each step in detail.

Step 1 Take latest code from SVN: 

If you notice I have chosen “Use ‘svn update’ as much as possible” as check-out strategy. So every time I click on build Jenkins will take update from SVN repository. So this step will be done using check-out strategy. 

Step 2 Publish .Net (ex. Web API) Application:

To build any .NET application we required MSBuild and that is why we have downloaded MSBuild plugin in the beginning. Time to configure that plugin follow the following steps to configure MSBuild.

Navigate to Global Tool configuration. To do so click on Manage Jenkins-> Global configuration tools. Please refer to screen shot 
If you have download MSBuild plugin and restarted Jenkins, you must be seeing MSbuild section in Global Tool Configuratioin. Please refer to following screenshot.


Click on Add MSBuild and add Name and Path to MSBuild. Please refer to following screenshot.


You can find MSBuild installed at “C:\Program Files (x86)\MSBuild\14.0\Bin” location. Please refer to screen shot.


Click on save and now MSbuild is configured in Jenkins.

Now navigate back to project configuration to do so from top click on Jenkins->Select your project->Configure.

Now come to build section and click on Add and select “Build a Visual Studio project or solution using MSBuild”. Please refer to following screenshot.



Points of interest

MSBuild version: Select MSBuild from the dropdown which we just configured in Global Tool configuration.

MSBuild File: Here you can specify either path solution (.sln) file or path of project file (.csproj).  I will be specifying solution file path. 

Command line: By default MSBuild will take build settings from the solution path but in case you need to change something you can specify that. Apart from this to publish your solution you need a publish profile which can be easily created using visual studio.


Let’s have a look how to create publish profile. Open the solution which you want to publish using Jenkins. Open solution explorer and right click on your main project and click on publish. Please refer to screen shot.

Create Publish profile:





Click on Custom


Enter the name of Profile ex JenkinsSetup. Please refer to screenshot.


 Specify the Target Location. For now select any random path because we are going to change it in sometime. 


Click on Next and check “Delete all existing files prior to publish”.


Now click on close and it will ask you to save profile click on ok to save this profile.

If you have notice we have specified target location while creating a profile. We need to change that url because I want it should target trunk so that when we setup Jenkins we should not be facing issues related to target url.

To do so open jenkinsSetup file and specify the relative path, as per my directory structure to navigate to trunk (SVN root) I had to come 4 steps up (..\). Now whenever I publish my solution it will always create a folder called PublishedFiles inside trunk (SVN root).  Please refer to screen shot.


Now we are ready to publish our Web API (.NET application) using Jenkins.

Back to configuration

As describe above fill the MSBuild section. Please refer to screenshot.


Points of interest

  • MSBuild: We just setup MSBuild in global configuration tool. 
  • MSBuild file: Path of project’s sln file from the workspace\<your job name>(i.e. My First Project).

Note:  Workspace is a directory where all the jobs stored by Jenkins whenever you create a job Jenkins takes a checkout of the project and place it inside workspace. You can navigate to workspace, it’s at “C:\Program Files (x86)\Jenkins\workspace”. 

We have completed our two steps of build. We can test these steps now just click on save and you will be redirected to landing page of your project. Just click on Build it will start taking checkout and build your project.


  • Command line argument:  Here we have specified published profile name which we have created using visual studio.
We have completed our two steps of build. We can test these steps now just click on save and you will be redirected to landing page of your project. Just click on Build it will start taking checkout and build your project.


It printed a success message that means it should create “publishedfiles" folder as I mentioned in profile and it should have all the files and folder which I generally get when I publish my website using visual studio. Yes Jenkins did create a folder. Please refer to screenshot.

Step 3 - Build Angular 2 application:

I am using webpack to build my application. To build application I need to execute “npm run build:webpack“ command on command prompt. As per configuration webpack creates dist folder after build and copy all build files in that.

To configure this command in Jenkins navigate to project configuration and add one more build step execute windows batch command. Please refer to screenshot.


This command will first navigate to “1. FrontEnd” folder where I have my angular 2 application, then remove existing dist directory and build the app using build command.


Step 4 - Combine angular 2 and web api application’s files

We will need to write one more command which copy all files from dist folder and move to “Publishedfiles” folder where I have Web API published files.  To do so I need one more build step. Please refer to screen shot.

Step 5 - Take backup of my database

Create build step and add command to take backup of database.

Points of interest


Following is the description of the command
  • First statement is used to create a variable which setup the file name as it should be unique so here I have used BUILD_ID it’s provided by Jenkins.
  • Variable can be accessed using %Variablename% in command prompt window.

Step 6 – Execute scripts if any.

Command prompt is a very powerful tool and I have used it to execute sql server scripts. In my project I need execute multiple scripts and to handle this I have used following approach
  • Push all the scripts in one folder
  • Write a command to execute all the .sql scripts from a folder.
If you want to handle scripts the same way, you can add one more build step and write following command.

Points of interest

  • This first statement checks if any sql script exist.
  • If yes then I have pushd command is used to navigate to ToBeExecuted folder where I have all the sql scripts
  • Loop all the files which have .sql extension and execute it one by one.

Step 7 – Deploy application to hosting server.

You might be amazed that application can be deployed using command line. To do so you must have MSDeploy installed at local machine, if installed you can fine it at “C:\Program Files\IIS\Microsoft Web Deploy V3”.

Let’s add one more build step and send the application to application server.


Points of interest

  • Before trying executing this command make sure you have configure application server to accept these files using msdeploy. To know how configure application server click here.  
  • If you have followed this article correctly so just need to replace <xx-xx-xx> with actual values.

Step 8- Archive build.

Sometimes you need to revert the build with older build or you need to rollback. For that purpose it is safe to archive build. Using Jenkins it is very easy to archive the build.

Click on Add post-build action and select Archive the artifacts. Please refer to screenshot.

And write the name of the folder you want to archive. You can leave it blank to archive the complete job after build.


 Thanks guys for reading this blog, hope this helped. Please write your feedback in comments below.

Comments

Post a Comment