Continuous Delivery on Windows Azure Websites using Visual Studio Online (VSO)

Like every company, Microsoft has had its good and not so good days. In the last ten years Microsoft has released some products that were moderately successful with market share ranging in a lower single digit. During the same time Microsoft also introduced some products which were/are immensely successful, two of them being so successful that they either lead the market, or are ranked second. These products that I am talking about are so feature rich that even competitors influence there products with these features.

The first of these two products is Microsoft Team Foundation Server which leads the market with more than 25% market share and the second one is Microsoft Azure which has recorded double digit market share since Nov 2014. It is but natural that Microsoft would leverage popularity of these two to achieve a combination that is a killer product in itself. Microsoft did that with Visual Studio Online (VSO) which implicitly uses Azure and Azure services to create an automated delivery pipeline which starts in Visual Studio in the form of code, and then goes to Visual Studio Online for source control and build. The same pipeline extends to Azure to do automated deployment of the built application.

In this article we will discuss how Visual Studio Online can be linked to Azure Websites for continuous delivery. This article has been co-authored by Gouri and Subodh Sohoni.

Using Visual Studio Online and Azure for Continuous Delivery

Starting from one end of the pipeline, we will create an account for Visual Studio Online, create a Team Project, create a web site, do the check-in to trigger the build and deploy it automatically on the Windows Azure portal. We will find out how any change in the code will be automatically delivered to the website. On the other hand, we start from the Azure end to create a Team Project in Visual Studio Online and then configure its deployment and then link it with a web site that is to be deployed on Azure.

We will start with the first scenario that is to start from Visual Studio and then take it to Azure by linking VSO on the way. As a preparation we will create an account and a Team Project on VSO before we go to Visual Studio.

Visual Studio Online provides features of Team Foundation Server in the cloud. It is not the Integrated Development Environment for developers to write code but is a cloud based environment for using TFS services without having to take efforts for installing, configuring or maintaining TFS.

Microsoft has now strategized that any new feature developed for TFS will first be deployed on VSO and then subsequently will be made available as cumulative update for TFS. So any new feature is instantly available with VSO. We do not have to wait for Visual Studio Update to get released.

Let us create a new account on Visual Studio Online. Each account for VSO is free for 5 users who consume Basic license. You can add as many stakeholders as required who can view status, provide feedback or even can create work items. These are not counted in the 5 users. Over and above these users you can also add any valid MSDN subscriber to your VSO account in the team. To create this account:

Step 1: Open your browser and navigate to http://www.visualstudio.com .Click on the Sign Up button for creating a VSO account

Step 2: You will get some suggestions for the new account. Any name builds a URL. I have selected the following URL.

Step 3: Click on Create Account. An account is created and you are redirected to the URL of https://ssgs-demo.visualstudio.com.

Let’s create a Team Project based on Agile Process template and select the version control as Team Foundation Server. VSO supports all the three standard process templates – Agile, Scrum and CMMI. It supports Team Foundation Version Control which uses centralized repository and also Git which is a distributed repository of source.

Creating a Team Project with VSO is very fast compared to creating a Team Project with on-premises Team Foundation Server. After creating a new project the dashboard is shown.

Step 4: We will now create our team of this account. Click on the Visual Studio Online link on the left hand side pane and we will get following menu.

Select Users.

Step 5: We can add as many stakeholders as required, up to 5 users with Basic license and as many MSDN subscribers as required.

After adding an email address of each user, VSO sends an invitation to the person for participating in the team.

Step 6: I have added 3 users - me as the account owner, one with basic license and one as a stakeholder

Step 7: Now that our team is ready, we can start contributing to the project. We can create work items as required and start writing code. In order to write code, I am using the latest CTP (5) build for Visual Studio 2015. I have also installed Azure SDK.

Step 8: Start Visual Studio 2015 CTP and select New Project. We want to target Azure as the host for running our web site so we will select the Cloud node under C#. Select the project template for ASP.NET Web Application from cloud node

We will add this project to the source control by clicking the checkbox ‘Add to source control’. We will get to select the team project that we have created under our new VSO account. We can also select Application Insights which is a diagnostic data analyzer. The analyzer is quite fascinating but more about it in a separate article of its own.

Step 9: Select a template suitable to your requirement and click on Ok.

Step 10: Observe the check box for adding unit tests. We can create unit tests projects at this time itself. Another cool feature added in VS 2015 is Smart Unit Test which we will discuss in a separate article.

Step 11: We need to provide details for region, database name (if we want to use it). The URL of the web site is built as name for the web site followed by .azurewebsites.net. In our case it is SSGS-Demo-Site.azurewebsites.net.

Step 12: Select Team Foundation Version Control, provide the name of the TFS for connecting, specify the credentials and the server name along with various Team Project names will appear in the dialog box. As there is only one Team Project in this case, it will look as follows

Click on the Connect button.

Step 13: Select the location for storing the solution and click on the Ok button.

Step 14: Connect to the Azure portal and select Websites option. The record of the newly created web site starts appearing. Azure automatically adds a placeholder for the missing application.

Step 15: Check-in the web site to the source control under VSO. To do that, Right click on solution explorer and select check-in, provide comment and click on check-in

We have so far linked Visual Studio to VSO and to Azure but we have not yet created the direct link between VSO and Azure. We will create it now.

Creating a directing link between Visual Studio Online and Azure

Step 16: Click on the web site from the azure portal and you will find the option ‘Integrate Source Control.’ After complete authorization the repository name can be selected for the VSO account. This repository name is the name of the team project under which we have added the code and linking to be done. We can observe that a build definition that does continuous integration and delivery is created. Now the pipeline is completed so that any check-in we do in the web site code will automatically get built on VSO and will get deployed to Azure. Exhilarating! And we have hardly taken any efforts so far!

Step 17: If you go to the site you will only see that the site is successfully created. Now we will make a small change in the contents of a page of the site and check-in the updated page again.

Step 18: In Visual Studio, open the About page from the web site with Visual Studio 2015 CTP and make the following changes

Step 19: Save the file and check-in the code to the source control.

Step 20: Go to the Build tab from Team Explorer and you will observe one build definition is automatically created, the name of which ends with CD. CD stands for Continuous Delivery. Every time you check-in any code, the build definition will be triggered on VSO. After successful build, the deployment to the Azure web site will be automatic.

Editing build definition will provide the trigger for the build definition as Continuous Integration. Process template selected is TfvsContinuousDeploymentTemplate.12.xml. The build controller is a hosted controller as we are using VSO. There is no need to configure build controller and build agent, as this it automatically handled by VSO for us.

Step 21: Refresh the web site from azure portal and go to the About page. Observe the changes shown.

What have we covered so far?

So far in this article, we discussed the complete process in which we created an account in Visual Studio Online, created a Team Project in VSO, created a web site with Visual Studio 2015 CTP, bound this web site to azure portal and implemented it such that any changes made in the code will be automatically delivered to the azure web site.

Now we will look at the other end of the pipeline (see introductory part of this article) where we begin from Azure, link VSO to it and then complete the pipeline to Visual Studio.

Link Azure with VSO and Visual Studio

We can create a Team Project using new azure portal and then create a VSO account for that team project. In your browser enter the URL as http://portal.azure.com and create a new work account (organizational account) for the portal. Use link http://azure.microsoft.com/en-us/documentation/articles/sign-up-organization/ to create such a work account.

Step 1: Provide information about your organization for signing up.

Step 2: Provide the information about the domain name, user id and phone number for verification

Step 3: After creating work account, connect to the new azure portal and select New and then select Team Project Creation option.

We can either use the Active Directory linked VSO or we can create a new VSO account that need not be linked to our AD in Azure. I created a new VSO account named SSGSIT and have selected Team Foundation as version control as well as the process template of SCRUM. Click the create button to create the Team Project in VSO under that account.

Step 4: Connect to Visual Studio Online account and verify that the Team Project is created

Step 5: Now let us create the project that we will add to source control under VSO. Create a new Project with Visual Studio 2015 CTP and select a project template

Step 6: Select the subscription for the newly created account.

Step 7: Connect to the VSO and select TFVS as source control. Check in the code after creating the web site.

Step 8: We have created a link from Azure to VSO, and from Visual Studio to Azure as well as VSO. We need to configure Continuous Deployment from the Azure portal now. Browse the created Team Project and select ‘Set up continuous deployment ‘.

Step 9: Select the web site on which we need to provide Continuous Delivery.

Step 10: We can view that the build definition is created for Continuous Deployment. It can be viewed from azure portal as well as from Visual Studio

Step 11: Change the code as we did in the first part and check-in. This will automatically trigger the build and also take care of continuous deployment.

Conclusion

Visual Studio, Visual Studio Online and Azure are now closely integrated to give us an effortless way to do Continuous Delivery of the web application. All we do it is create the application in Visual Studio, put it under VSO for source control and build. Azure is used to host the web application and VSO does the continuous delivery of the application against every check-in!

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Gouri is a Trainer and Consultant on Azure DevOps and Azure Development. She has an experience of three decades in software training and consulting. She is a graduate from Pune University and PGDCA from Pune University. Gouri is a Microsoft Most Valuable Professional (MVP)  - Developer Technologies (Azure DevOps), Microsoft Certified Trainer (MCT) and a Microsoft Certified Azure DevOps Engineer Expert. She has conducted over 150 corporate trainings on various Microsoft technologies. She is a speaker with Pune User Group and has conducted sessions on Azure DevOps, SQL Server Business Intelligence and Mobile Application Development. Gouri has written more than 75 articles on Azure DevOps, TFS, SQL Server Business Intelligence and SQL Azure which are published on www.sqlservercurry.com and www.dotnetcurry.com. You can connect with her on LinkedIn.