How to easily Set Up CI/CD for your Azure DevOps Source Controlled Web Projects

By | November 15, 2018

Ever wondered how to configure your Azure DevOps to do CI/CD that is triggered when you check in your Web Projects, well its quite easy as long as you already have set up your projects using Azure DevOps as its source control. This post is to demo to you in a few steps how this can be achieved, where a project check in invokes a publish to your test, staging or production site.

Here is how it goes.

First requirement before you continue is that you have an Azure Tenancy Setup already, if you don’t have one you can set up one for free here. Next requirement is that you have Azure DevOps already set up otherwise you can also get one here for free. Now you have both lets continue.

1. Create your App Service

Add Service is where your Website will be published. Go to your Azure Portal, select App Services, then click add.

Select Web App

Set up the Attributes
App name – What do you want to call your website
Subscription – Which subscription you would want to use
Resource Group – What Resource Group you want to allocate this resource
OS – The OS your application will be hosted. Since our project demo is a .Net Website we will be choosing Windows
Publish – Code or Docker enabled app
App Service Plan/Location – Choose or create a new one depending on your requirement

Once you have all the values filled, click Create.

Wait for it to finish, you will get a notification once its done

2. Check In your project

Check in your project so you can use that build for your first publish

That’s all you need to do in this step, just make sure it is a running error free build.

3. Create a Build Pipeline

Go to your Azure DevOps, choose Pipeline then Build.
Click on New Pipeline

Select TFVC (short for Team Foundation Source Control) as your source then click Continue.

Select a template, choose Azure Web App for ASP.NET then click Apply

Set Up the Tasks, go to the Task Tab, indicate a name for this CI/CD Task, Choose an Azure Subscription then the App Service name you created on step one above. Take note it should be on the same subscription.

Click the Variables tab, change the BuildConfiugration value to the Build Configuration you want to use (Illustrated Below).
Note: It’s the text between Web and Config, ie in Web.Debug.Config or Web.Release.Config, it will be Debug or Release, not case sensitive

Ensure that the solution has the Web.Config Transform, if you don’t have it here is a guide on how to create one.

Now click on Triggers, to set automated trigger on Check In. This means if you require CI (Continuous Integration) then click on the Enable Continuous Integration checkbox. There will be a warning asking you to add filter

It is just a UI Bug so tick and untick the Continuous Integration checkbox to populate the path automatically

If you don’t use test, remove the VsTest – test Assemblies by going back to Continuous Integration checkboxTab, choose VsTest – test Assemblies, right-click then choose Remove selected tasks.

Still on the tasks tab, Choose Azure App Service Deploy, choose a Display Name then indicate a Package or folder, naming the zip file as your project name. ie. .zip

Click Save & Queue, choose Save & Queue if you want to publish it right away, Save if you want to manually do the publishing later

In our case it save and Queue, you can add a Save comment if you want, then click Save & queue

This will queue the project you checked in on Step 2, compile it and publish on your App Service

4. Your Done, Check the running processes in Azure DevOps and wait

Once done you will see it on your Build Pipeline, you will also see queued jobs after you check in your Project. That simple!


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.