Super Easy Continuous Integration with Azure Websites, Hosted TFS, and Visual Studio 2012

Overview:

All I can say is WOW.  This was super easy to setup. My goal was to use Visual Studio 2012 to create an Azure Web Site, and to use Microsoft’s Hosted TFS  for my source control and build server. If all of the above items are new to you, that may sound like a daunting task, but as you’ll see, it is extremely simple. Also, don’t let the length of this blog post scare you off.  I tried to be very specific about the steps and include a lot of screen shots, so It looks like a lot, but all in all it will only take you about 10 to 15 minutes to complete.  Here’s an diagram with a basic overview of the pieces:

Azure Websites Continuous Integration

Keep reading for a 7 MINUTE video demonstration of the ENTIRE PROCESS, and step-by-step instructions!


Video Walkthrough

The rest of this blog post walks you step by step through the process, but I’ve recorded a video of the process as well.


Note – Change the player to HD for a better image

Pre-Requisites

You’ll need a few things to get started. 

  • Visual Studio Express 2012 for Web or a full version of Visual Studio
    • You can get free trial of “Visual Studio Express 2012 for Web” or “Visual Studio 2012 Ultimate
    • You may already have access to a copy if you have an MSDN Subscription
  • TFS Preview Account.  Get a free one if you don’t already have one
  • A Windows Azure Account.  Get a Free Azure 90 Day Trial if you don’t already have one.

Create a Team Project in TFS

A TFS Team Project is a container of work items, documents, reports, build definitions and source code.  You can add the source code for one or more Visual Studio solutions (like a solution that contains a web project) to a single TFS Team Project.  We’ll create a new Team Project in TFS to hold our Visual Studio solution and web project that will eventually be deployed to an Azure Website. 

  • Sign into your account at tfspreview.com
  • Make sure you are on the http://<AccountName>.tfspreview.com site.
  • Click “Create a team project”

SNAGHTML1eec838

  • Provide the details for your new Team Project.  I’ll call mine “Azure Web Site”, give it a description, and use the “Microsoft Visual Studio Scrum 2.0” process template.  Finally I’ll click “Create Project”:

SNAGHTML1fc88d8

  • When the Team Project is ready, click the “Navigate to Project” button

SNAGHTML1f8613c

That was pretty simple!  The result should look something like the following:

SNAGHTML1fb68ab

Create an Azure Web Site

Next, we’ll sign into the Windows Azure management portal and create a web site.  This provisions a hosted web platform that we can use to deploy the web site we create in Visual Studio to. 

  • Sign into the Windows Azure Management Portal
  • If you are seeing the older Silverlight based management portal, switch to the new portal preview by clicking on the “”Visit the Preview Portal” link along the bottom:

SNAGHTML20a6ee3

  • Once you are signed in to the new portal, You can click on “Web Sites” along the left edge.  You may or may not have any web sites yet.  I’m going to create a new web site by clicking on the “New Button” in the bottom left corner of the management portal:

SNAGHTML21247c3

  • In the “New” panel, I’ll select “Web Site”, “Quick Create”, set the URL as “AzureWebSiteCI” (the “CI” portion stands for “Continuous Integration”), pick a Region and the click “CREATE WEB SITE” button in the bottom right.  Note, you should name your website URL something unique.  Note also that you are naming just the host name of the URL.  The full URL will be <YourWebSiteName>.azurewebsites.net .

image

  • That’s how easy it is to create a new website in Azure! 

SNAGHTML22b2324[4]

At this point, you could deploy code to your new web site using a number of methods including:

  • Good ol’ FTP
  • Web deploy directly from Visual Studio
  • Directly using WebMatrix
  • Publish from GIT
  • Publish from TFS.  That’s what we’re going to do.

Setup TFS Publishing

  • Once the website it created, it should appear in the list of Web Sites.  Click on the name of your newly created site to open the Dashboard:

SNAGHTML21dbf91

  • On the Dashboard  for your site, Under the “quick glance” heading, select “Set up TFS publishing”

SNAGHTML221076a

  • In the Popup Window that appears, enter the name of your TFS Preview account that we created above, and click “Authorize Now”:

image

  • You’ll be prompted to for permissions.  Click “Accept”

SNAGHTML224e55a

  • Next, pick the Team Project that we created above, and click the check mark button in the bottom right:

image

  • Once that has completed, the management portal will have a new “DEPLOYMENTS” tab for your website. 

image

Really simple.  Our Azure Web Site is now setup to receive deployments from our TFS Team Project. When we created the link above, a continuous integration build definition was created in our TFS Team Project.  That means that from now on, whenever we check in code to our TFS Team Project’s source control, it will automatically kick of a build, and as long as the build succeeds, the site will be automatically deployed to our Azure Web Site.  COOL!

Create the Visual Studio Project

As with most of the steps I have outlined in the post, there are numerous ways to accomplish the following.  I’ll follow a path that assumes you don’t ALREADY have a web site project.  If you already have an existing web site project that you would like to deploy this way, the steps will be slightly different.  The main goal though is that your web site project (solution really) needs to be added to the source control of the TFS Team Project that your Azure Web Site is linked to.  So with that in mind, let’s get started:

  • With the Azure Web Site we created above open in the Windows Azure Management Portal , there should now be a “Visual Studio” button along the bottom (this actually replaced the “WEBMATRIX” button that was there before we linked our site up to TFS).  If you click on the “Visual Studio” button, it will attempt to launch Visual Studio and automatically connect you to the right Team Project in your tfs server.  Cool!  So, click the “Visual Studio” button along the bottom:

SNAGHTML23af34f

  • You’ll be notified that Visual Studio will launch automatically and will attempt to connect to your team project.  It also gives you instructions to connect manually if you need to.  Click the check mark button to continue:

SNAGHTML23cfd5d

  • Allow Visual Studio to be launched (note I’m using Visual Studio 2012 Express for Web in this demo, but a full version of Visual Studio would work just as well:

image

  • If this is the first time you have connected to your TFS server, you’ll need to login with the Live ID you used to created it above:

image

  • The Visual Studio “Team Explorer” window should now you you connected to your Team Project!  Woo Hoo!

image

  • From the Visual Studio menu bar select “File” | “New Project…” (or “File” | “New” | “Project…” in a full version of Visual Studio).  Pick an appropriate web project template.  Make sure to pick “.NET Framework 4” from along the top.  That’s because at least as of now (08/14/2012) Azure doesn’t support .NET 4.5 because it isn’t live.  Once that changes you can use .NET 4.5 projects.  Regardless, Give Project a name and Location, and MAKE SURE TO TURN ON THE “Add to source control” check mark.  This will help us add it to our TFS Team Project. 

SNAGHTML264ff22

  • In my case, I picked an MVC 4 Web project, so I need to tell it what kind of project to I create.  I’ll just create a standard “Internet Application”, and I’ll refrain from Unit Tests.  Although, you can pick any kind, and even include unit tests if you like.  The tests will even be run during the continuous integration build.  Cool:

image

  • You will be prompted to add your new solution to the Source Control library in your TFS Team Project.  Review the options presented, but you should be able to leave them at the defaults, and click “OK”:

image

Awesome.  All the pieces are in place now.  We have a hosted TFS service with a Team Project, we have a Windows Azure Web Site provisioned, and we have created a new Web Site project in Visual Studio and added it to our TFS Team Project’s source control library. 

Check-in, Build and Deploy

  • You could certainly edit the code of your site, but for this demo, I’m going to go ahead and just check in the code provided by the templates.  From the “Team Explorer” window in Visual Studio, click the “Pending Changes” link:

SNAGHTML24fd6ab

  • Enter a Comment an click the “Check In” button:

SNAGHTML251e3a6

  • Click “Yes” in the “Check-in Confirmation”:

SNAGHTML2530163

  • Remember that a check in should trigger an automatic build.  You can monitor the build from Visual Studio, the hosted TFS management site, or the Azure Manage Portal.  For example:  In Visual Studio’s Team Explorer you can click the drop down arrow along the top and select “Builds”

SNAGHTML256cbd2

  • Or return to the “Deployments” page for your web site in the Windows Azure Management Portal

SNAGHTML25939c1

SNAGHTML26967d3

  • Once the build is done and the site has been deployed to Azure (confirm this from the “DEPLOYMENTS” page for your Web Site in the Azure Management Portal), you are ready to brose the site.  SO COOL.  You can navigate directly to the site’s URL (<sitename>.azurewebsites.net) or from simply click on the “BROWSE” button on the bottom of the azure management portal page for your web site:

SNAGHTML26edd02

  • If all went well, you should see your web site running in all its glory!

image

Summary:

Ok.  Now that I wrote it all out step-by-step it may seem like a lot.  But really it takes about 10 to 15 minutes to get through all of the above work.  Once you are done you have a build server setup that will do continuous integration builds and automatic deployments of your web project to an Azure Web Site.  Now as any developer on your team checks code into Source Control the continuous integration build will be kicked off automatically. 

2 Responses

  • Thanks for the video. The pictures really help, but the video is best.

  • This was a great help! Thanks for taking the time to put this together. I have one question though. If I have more than one web project in my solution, how do I configure each project to build to a different azure web site? Thanks!

Leave a Reply