Building a DevOps CI/CD Pipeline for ASP.NET Core with VSTS

Introduction

Web-based application makes our work easier. Especially when we need interaction between screens, we could think about single page application (SPA). For SPA, we may need web-pack or grunt or gulp, etc. for merging and bundling our client scripts. Click here for the basics. Suppose we use ASP.NET Core, then we may need to manage packages using npm or bower or yarn, etc. so that we can restore packages and compile our application. But if you don’t have automated CI/CD. then first time deploying a single page app is hard too. In this article, my main focus is to show you how to create build and release for your ASP.NET Core Applications using VSTS.

Coverage Topic

• Monolithic Architecture and Microservices Architecture
• Agile and DevOps
• Continuous Integration
• Continuous Delivery
• Continuous Deployment
• Project Creation using VSTS
• Creating New Build Definition
• Bundling script with webpack
• Creating New Release Definition

Let's Drill Down the Basic Concept

Monolithic Architecture and Micro-services Architecture

There was a time when monolithic architecture was a common practice and waterfall model was popular. In this methodology, everything was treated as one big project which was structural and sequential process. Now, it is broken down into small pieces and it is iterative. Yes, I mean the microservices architecture and Agile methodology.

Agile and DevOps

We know Agile is a development methodology. The very word DevOps is the extension of the Agile and it mainly focuses on development process to production support. We can say, this is the combination of software development and operations.

Driving Force behind DevOps

The terms that often come up when we talk about DevOps:

• Continuous Integration (CI)
• Continuous Delivery (CD)
• Continuous Deployment (CD)

Continuous Integration

Several times in a single day, developers check in/commit and merge codes into a shared repository (Git, Team Foundation Version Control, etc.) and after this code merge, it builds and runs automated tests automatically.

Continuous Delivery

After code integration, code is built and tested. Now it is ready to push your code to staging environment (non-prod testing) or production, but you need manual approver to push it.

Continuous Deployment

After code integration, code is built and tested. Now without any approval, it is automatically pushed to staging environment (non-prod testing) or production.

Automated CI for ASP.NET Core Application using VSTS

Pre-requisites

You need Visual Studio Team Services account and Git account. Don’t have one? You can create a new free account from https://www.visualstudio.com and https://github.com.

Creating a Team Project using VSTS

1. Select Projects>New Project.

   

2. Provide a name for the project and choose the right version control Git or TFVC for your project. Select a work item process. Click on Create button to create the project.

   

3. Click on Clone in Visual Studio.

   

4. VS IDE will pop up a window. Click on Clone button.

   

5. Select Team Explorer and then click on Create a new project or solution.

   

   After creating the project, you need to commit all of your changes. Click on Team Explorer>Changes. Fill the change comment and click on Commit All.

   

6. Click on Sync to synchronize the codes.

   

7. Finally, click on Publish (Outgoing Commits>Publish).

   

Creating New Building Definition for ASP.NET Core Application

1. Select the Build & Release tab and Builds.
2. Select New to create new definition.

   

3. Select Project, repository, branch and then click on continue.

   

4. Choose a build template according to your project type. I’m selecting ASP.NET Core (.NET Framework) and click on Apply button for the build definition.

   

5. Select the Process task and fill the name of the build definition (Say, HelloWorld-Dev, we’ll use this name in the release). Select Hosted VS2017 for the default agent where you want to run the build.

   Choose Hosted VS2017 if your team uses Visual Studio 2017 then it has .NET Core framework and required others components to build the project. Choose Hosted Linux if your team uses development tools on Ubuntu. Choose Hosted if your team uses Visual Studio 2013 or Visual Studio 2015.

   Select the project solution file for “Path to solution or packages.config” and fill the Artifact Name.

   

6. Select the Get sources task and check the correct project, repository and branch. Select clean: true and clean options: sources. Tag sources: Never. Report: build status.

   

7. Select Build solution task from Phase 1. Choose Visual Studio Version: Latest. MSBuild Architecture: Select X64 or X86, the right one which works for you.

   

   Application Builds and Bundling with Webpack

8. We need to add npm to install all of the packages that are used into our project. To add npm task, click on the (+) Add Task from the right side of the Phase 1 and select Package. Find and add the npm task. Now drag and drop the npm task to place it before Build solution. If you use Bower instead of npm, then you need to add Bower.

   

   Now select the npm task and choose Command: install. Now for “Working folder with package.json”, select the root folder of the main project where you have package.json file. Select Custom registries and authentication Registries>Registries to use: Registries in my .npmrc; Advance>Verbose logging: checked; Control Options>Enabled: checked.

   

9. Next, we will need the PowerShell Script task to compile our client-side scripts. Here, we will install webpack and compile JavaScripts using web-pack. Select (+)Add Task and look for PowerShell from the Build section. Add that to the build definition in-between npm install and Build solutions task.

   

   Fill the following information:

   • Display name: PowerShellScript
   • Type: Inline Script
   • Inline Scripts:

     (Get-Item -Path ".\" -Verbose).FullName
     $env:Path=[System.Environment]::GetEnvironmentVariable("Path","Machine")+";"+
     [System.Environment]::GetEnvironmentVariable("Path","User")
     Get-Command -CommandType Application -ErrorAction SilentlyContinue 
     -Name webpack | Select-Object -ExpandProperty Definition | echo
     npm install -g webpack --no-optional
     node_modules\.bin\webpack -p

   • Advanced> Working folder: Root folder of the web-app where you have webpack.config.js file.
   • Fail on Standard Error: checked
   • Control Options: Checked Enabled & Continue on error
   • Run this task: Only when all previous tasks have succeeded.
10. Select Triggers tab and select the following information.
    • Enable continuous integration
    • Batch changes while a build is in progress
    • Branch filters>type: include & Branch specification: i.e., dev or qa or master

      

11. Select Options tab and select the following information.
    • New build request processing: Enabled.
    • Automatically link new work in this build: Enabled.
    • Only link to work added to specification branches>Type: Include; Branch specification: i.e., dev.
    • You can also change the default value for Build job.

      

12. Finally click on Save & queue>Save to save the build definition.

    

    Now we have automated CI build if you commit your code changes into your selected branch, then you will see the following output ….

    

Creating New Release Definition

1. Go to Build and Release tab > Releases > New definition.

   

   Note: If you already have existing release, then select plus sign (+) and Create release definition.

   

2. Select a template: IIS Website and SQL Database Deployment.

   

3. You will get an environments window. Now change the environment name from the properties.

   

4. In the Artifacts panel, select +Add and select the Project, Source (Build Definition), Default version and a name for Source alias. Click on Add button.

   

5. Click on the lightning bolt to trigger the continuous deployment and then enable it on the right. You need it if you want a new release to be created when a new version of the source artifacts are available. Click on Add button and select the Type and Build branch.

   

6. Click on the lightning bolt of the Environments and then:
   • Select trigger: After release
   • Artifact filters: Enabled
   • Select + add> Artifacts Name (i.e., HelloWorld-Artifact-Dev)
   • Type: Include; Build branch: i.e., Dev; Build tags: leave blank.

     

7. On the left-hand side of the browser, select the tasks or select the tasks (2 phases, 2 tasks) from the Environment panel. These tasks will perform your deployment process.

   

8. Now Select Tasks> task Environment (say, HelloWorld-Dev-Env) and fill the below information:
   • Configuration type: IIS Website
   • Action: Create Or Update
   • Website name: HelloWorldApp-Dev
   • Application pool>name: HelloWorldApp-Dev
   • Click on Add bindings> … button. Add-bindings window will pop up and fill the information:
   • Protocol: http or https, Port: your IIS assigned port (i.e., 543) and HostName: i.e., helloWorldApp-dev.yourDomain.com.

     

9. Click on IIS Deployment on the left-hand side and select the deployment group.

   

10. Select the IIS Web App Manage and fill the information:
    • Physical Path: %SystemDrive%\inetpub\wwwroot\Dev\HelloWorldApp-Dev\
    • Physical path authentication: Application User (Pass-through)
    • .NET version: v4.0
    • Managed pipeline mode: Integrated
    • Identity: Select your preferable identity

      

11. Select the IIS Web App Deploy and check on the Take App Offline.

    

12. I didn’t use SQL deployment task. So, you can disable or remove the task if you don’t need it. Select the SQL Deployment and right click on it to Disable selected task(s) or Remove selected task(s).

    

13. Finally click on the Save button to save the release definition.

Note: Don’t forget to setup your IIS configuration.