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
So, when we check-in the code into GitHub repository, it will perform the below operations.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
Step 1
 
Create a new web API project using Visual Studio.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
Step 2
 
Let's associate this project with the GitHub repository. To do so, click add to source control in the Solution Explorer.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
Step 3
 
Click the Git option and enter your GitHub repository URL, then push your code into the corresponding repository.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
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.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
Step 5
 
Once the organization created, create a new project in that organization. 
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
Step 6
 
Once the new project template created, you can see the below summary page:
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
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.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
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.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
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.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
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.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
Step 11
 
Once we choose the GitHub option you will be redirected to select a particular project repository.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
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.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
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.
  1. # ASP.NET Core (.NET Framework)  
  2. # Build and test ASP.NET Core projects targeting the full .NET Framework.  
  3. # Add steps that publish symbols, save build artifacts, and more:  
  4. # https://docs.microsoft.com/azure/devops/pipelines/languages/dotnet-core  
  5.   
  6. trigger:  
  7. - master  
  8.   
  9. pool:  
  10.   vmImage: 'windows-latest'  
  11.   
  12. variables:  
  13.   solution: '**/*.sln'  
  14.   buildPlatform: 'Any CPU'  
  15.   buildConfiguration: 'Release'  
  16.   
  17. steps:  
  18. - task: NuGetToolInstaller@1  
  19.   
  20. - task: NuGetCommand@2  
  21.   inputs:  
  22.     restoreSolution: '$(solution)'  
  23.   
  24. - task: VSBuild@1  
  25.   inputs:  
  26.     solution: '$(solution)'  
  27.     msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:DesktopBuildPackageLocation="$(build.artifactStagingDirectory)\WebApp.zip" /p:DeployIisAppPath="Default Web Site"'  
  28.     platform: '$(buildPlatform)'  
  29.     configuration: '$(buildConfiguration)'  

  30. - 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.
  1. - task: VSTest@2    
  2.   inputs:    
  3.     platform: '$(buildPlatform)'    
  4.     configuration: '$(buildConfiguration)'   
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
Step 14
 
Once the pipeline builds successfully, we can see the below result. That's it, we have successfully completed the pipeline setup.
 
CI/CD Implementation For Simple Web Application Using Azure DevOps
 
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 ;)