Continuous Integration and Delivery with Visual Studio Team Services (Part 1)

How easy it is to use TFS online (aka Visual Studio Team Services) to build, run unit tests and deploy a simple.Net MVC website into Azure websites? This post is part 1 – building, running tests and creating the artifacts. Part 2 will look at using MS Release Management (part of VSTS too) to take the build output and deploy it to Azure websites. The goal is that when I check in my code, Visual Studio Team Services will compile it, test it and then deploy.

Recently I used the Visual Studio Team Services tooling to achieve CI and CD, and to my surprise it was quick and actually, reasonably pain free to setup. I was so pleased, I thought I’d write a couple of blog posts about it.

I created a simple .Net solution, that consisted of 3 projects.

  1. MVC Website
  2. Test Project
  3. Class Library

The website is a simple implementation of Binet’s formula to calculate the nth item in the Fibonacci sequence. Not important right now and I’ll go into the website side of things more in a subsequent post. I hooked it into a github repository, got it working and committed it.

Now the interesting part begins, of getting Visual Studio Online Visual Studio Team Services to create the build.

Step 1 – Go to Visual Studio Team Services, sign in/create a free account and create a new project, calling it Binet, selecting GIT as the source control.

step1

 

 

Hit Create. Next we need to connect it to our GIT repsoitory.  As our code is already hosted at GitHub, choose setup build.

step2

Next – we’re creating a build definition, online. Exciting times. From the options available we want to use the Visual Studio template.

step3

Hit Next. Now we need to connect the build definition to our github repository. All other defaults remain.

step4

 

For me, this popped out a new tab asking me to connect my VS online account to my GitHub account.

step5
Small gotcha for me – hitting the authorize button tried to create a popup that chrome blocked, so had to allow this popup).

Allow VS Online access to my github account

step6

I then selected my Binet respository, came back to VS Online and hit save, and we’re done! We have a complete build definition using virtually all the default settings.

Well, not quite. It won’t create the website in the artifacts folder. What the duce…
Yes, the most important part of building a website, is, well the website! By default it was creating just the test and class library project.

There is a solution though. This blog, details it.
The gist is we need to get msbuild to create the infamous _PublishedWebsites  folder, which contains all the files the website needs. This is achieved by passing these magic commands to msbuild:

/p:OutDir=$(build.stagingDirectory) /p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true

Navigate to the build definition, and change the msbuild arguments passed into the ‘Build Solution step.

step7

We want to make sure we publish all files to the artifacts directory, so we need to make a small change to the Copy files step. This is changing the contents to **\*

step8

Nearly there. As we have a moved the output slightly, we need to update the test step to be able to locate the test assemblies now. That involves changing the entry for test assembly from

**\$(BuildConfiguration)\*test*.dll;-:**\obj\**

to:

$(Build.StagingDirectory)\*test*.dll;-:**\obj\**

Which looks like this

step9

Now we are ready to try it. Hit the Queue new build button. I just accepted the default options and hit ok.

step10

and we’re off and waiting for a build agent. For me this didn’t take very long at all.

step11

Then the build starts

step12

…and succeeds!

 

step13

We can also look at the stats of the build, in the build summary. From here you can also view the artifacts to verify what was built.

step14

We now have an active build definition set up in Visual Studio team services. Every time a checkin is detected on our Github repository a new build is triggered.

In my next post I’ll show how to setup continuous delivery to Azure websites using the online Release Management tooling.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s