Click here to Skip to main content
13,899,965 members
Click here to Skip to main content
Add your own
alternative version

Stats

13.5K views
21 bookmarked
Posted 6 Jun 2018
Licenced CPOL

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

, 7 Jun 2018
Rate this:
Please Sign up or sign in to vote.
This article mainly covers how to create new build and release definition using VSTS. There are short descriptions of DevOps, continuous integration, continuous delivery and continuous deployment.

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.

One Big Project

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.

Agile Development

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.

CI Process

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 Delivery

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.

Continuous Deployment

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.

    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.

    Create Project

  3. Click on Clone in Visual Studio.

    Clone Project

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

    VS_Clone

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

    Create 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.

    Commit

  6. Click on Sync to synchronize the codes.

    sync

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

    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.

    Build_Defination

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

    SelectSource

  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.

    TemplateForNewBuildDefination

  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.

    NamingOfBuildDefination

  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.

    GetSource

  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.

    BuildSetup

    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.

    AddNPM

    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.

    NPMInstall

  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.

    PowerShell

    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

      Triggers

  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.

      Options

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

    SaveBuildDefination

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

    Build_Output

Creating New Release Definition

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

    NewRelease

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

    CreateNewRelease

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

    IIS_TemplateAdd_Release

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

    Environment_Name

  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.

    Release_Add_Artifact

  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.

    CI_Trigger

  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.

      Trigger_Env

  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.

    Task_Env

  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.

      8Task_Env

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

    9IIS_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

      10IIS_Web_App_Manage

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

    11IIS_Web_App_Deploy

  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).

    12Disable_SQL_DB

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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

HR Rony
Engineer
United States United States
Motivated software developer in web/mobile application development, architecture design, and multi-layer implementation. Well-versed in multiple programming languages and platforms. Demonstrated success in UI, integration, and automated unit testing.

You may also be interested in...

Pro

Comments and Discussions

 
NewsGreat article! Also read my articles on the same topic. Pin
Sudipta Chaudhari14-Jun-18 6:44
memberSudipta Chaudhari14-Jun-18 6:44 
GeneralRe: Great article! Also read my articles on the same topic. Pin
HR Rony15-Jun-18 7:59
memberHR Rony15-Jun-18 7:59 
GeneralMy vote of 5 Pin
prashita gupta13-Jun-18 10:13
memberprashita gupta13-Jun-18 10:13 
GeneralRe: My vote of 5 Pin
HR Rony17-Jul-18 10:21
memberHR Rony17-Jul-18 10:21 
GeneralMy vote of 5 Pin
Alexey KK9-Jun-18 22:34
professionalAlexey KK9-Jun-18 22:34 
GeneralRe: My vote of 5 Pin
HR Rony17-Jul-18 10:21
memberHR Rony17-Jul-18 10:21 
PraiseMissing Microsoft Guide Pin
Alexey KK8-Jun-18 12:15
professionalAlexey KK8-Jun-18 12:15 
QuestionArticle is good but ,Formatting Issues are there and images are too large Pin
Saineshwar Bageri6-Jun-18 20:07
member Saineshwar Bageri6-Jun-18 20:07 
AnswerRe: Article is good but ,Formatting Issues are there and images are too large Pin
HR Rony7-Jun-18 5:44
memberHR Rony7-Jun-18 5:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190306.1 | Last Updated 7 Jun 2018
Article Copyright 2018 by HR Rony
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid