CI/CD Implementation For A Simple Web Application Using Azure DevOps

Introduction

 

This article explains how to implement CI/CD (Continues Integration and Continues Delivery) for a simple web application using Azure DevOps. There are few ways to perform CI/CD, In this article, I am going to explain how to implement CI/CD using Azure DevOps(Development IT Operations). As we already know of CI/CD, I am directly moving to Azure DevOps implementation. If you want to know about CI/CD, please go through a few basic concepts and let it into this article. As we know, this process takes more explanation, So I am dividing it into two articles.

 

Prerequisites

• Azure Subscription. - Azure
• Visual Studio 2019. - Visual Studio 
• .Net Core 2.0. - .Net Core Download 
• GitHub. - GitHub Repository

So, when we check-in the code into GitHub repository, it will perform the below operations.

 

 

Step 1

 

Create a new web API project using Visual Studio.

 

 

Step 2

 

Let's associate this project with the GitHub repository. To do so, click add to source control in the Solution Explorer.

 

 

Step 3

 

Click the Git option and enter your GitHub repository URL, then push your code into the corresponding repository.

 

 

Step 4

 

That's it, we have set up the source code part. Let's move into Azure Devops settings. To do that, initially, we have to create an organization. So navigate to dev.azure.com.

 

 

Step 5

 

Once the organization created, create a new project in that organization. 

 

 

Step 6

 

Once the new project template created, you can see the below summary page:

 

 

Step 7

 

Navigate to Repos menu from the left side, In this section, you can manage your source code. As of now, we didn't associate source code. There are a few options to choose from. Let's choose the below option.

 

 

Note 

The GitHub URL you can get from your GitHub repository. 

 

Step 8

 

Once the import has successfully completed, you can view the below screen.

 

 

Step 9

 

Great! We have set a source code as well. Let's move into pipeline settings. Pipeline settings mean "Azure Pipelines is a cloud service that you can use to automatically build and test your code project and make it available to other users". Click the Pipeline menu from the left side and click Create Pipeline.

 

 

Step 10

 

Once you click Create Pipeline, you can see four stages to complete pipeline setup. In the first stage, you have to configure your source code repository. As we know, we have our source code available in the GitHub repository. You will see below the screen, select the GitHub option.

 

 

Step 11

 

Once we choose the GitHub option you will be redirected to select a particular project repository.

 

 

Step 12

 

The next step takes you to configure repository security settings. Configure the target framework of your application. Please refer to the following screenshot.

 

 

Step 13

 

For the final step for pipeline setup, you can see a YAML file for our pipeline settings. There are few tasks like Nuget package install, building a test project, and building our actual application.

# ASP.NET Core (.NET Framework)
# Build and test ASP.NET Core projects targeting the full .NET Framework.
# Add steps that publish symbols, save build artifacts, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/dotnet-core

trigger:
- master

pool:
  vmImage: 'windows-latest'

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'

steps:
- task: NuGetToolInstaller@1

- task: NuGetCommand@2
  inputs:
    restoreSolution: '$(solution)'

- task: VSBuild@1
  inputs:
    solution: '$(solution)'
    msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:DesktopBuildPackageLocation="$(build.artifactStagingDirectory)\WebApp.zip" /p:DeployIisAppPath="Default Web Site"'
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'

- task: VSTest@2
  inputs: 
    platform: '$(buildPlatform)' 
    configuration: '$(buildConfiguration)'

Note

By default, the pipeline YAML file includes a test project as well. You can see the below code in your file. As of now, we don't have a test project. So let's remove that code and hit the save and run option.

- task: VSTest@2
  inputs:
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'

 

Step 14

 

Once the pipeline builds successfully, we can see the below result. That's it, we have successfully completed the pipeline setup.

 

 

So as of now, we have completed half the stage of CI/CD implementation in Azure DevOps. Next, we have to configure a few other settings to complete the whole CI/CD process. Please stay tuned for the next article.

 

I hope this was helpful to you. Enjoy ;)