Publish site from TF Service to Azure website


Today we are going to go through all the steps of connected a project in TF Service to Azure using integrated continuous build.

First thing we’ll do is create a new Team Project in TF Service by browsing to the root of your visualstudio.com site and clicking New Team Project.

image

Complete the new project form selecting Team Foundation Source Control.

image

Open Visual Studio and create a new web application selecting to add to source control.

imageimage

For the purpose of this tutorial make a small change to the application and then check-in the code.

image

At this point you should be able to go into your TF Service interface and you’ll see the latest changes to your website as you’d expect. Next we’ll go to the azure portal and create a new blank website and connect it to our source control.

Browse to https://manage.windowsazure.com/, in the bottom left (after logging in) you’ll notice a new button. Click it.

image

Click Compute > Web Site > Custom Create

image

Type a url for you site and click Publish from source control. And click next.

image

You’ll find a variety of source control vendors including the local GIT repo that was recently introduced to TF Service, for this tutorial we will select Team Foundation Service which is where we checked our website into earlier, and click next.

image

Type your visualstudio.com account url in and click Authorize Now. This should bring up a window as below which you should now select Accept.

image

Next you should select the Team Project Name that you want to connect to and click complete.

image

You’ll see for a short while there will be a little loader saying creating, this is creating your site in azure and also adding a build definition to TF Service for continuous integration.

image

When the creating changes to running you can click on the site and at the bottom you’ll see a browse button this should browse to your new site and it should have the default blank azure site.

imageimage

Now if you go back into Visual Studio and click on the menu bar in Team Explorer and select Builds

image

you’ll notice that there is a new build definition for your new site (if the definition is disabled, right click and click edit Build Definition, select enable under the general tab and save the definition)

image

Now right click on your build definition and click Queue New Build, and then click Queue (if the build didn’t run automatically by itself).

imageimage

If you click on the build request you should see a screen like this, that will update with results of the build so you don’t need to refresh to see progress.

imageimageimage

Now if you refresh your azure site you’ll notice your website has been published

image

Obviously you can alter the Build definition, maybe you’d rather not have builds off every check in and only configure manual deploys.

Hopes this tutorial helps Smile

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