Wednesday, December 4, 2013

Reduce the trail-deploy-test time with Windows Azure Web Sites and Visual Studio Online

Visual Studio Online

Not long ago Visual Studio Online went GA. What is not so widely mentioned is the hidden gem – preview version of the actual Visual Studio IDE! Yes, this thing that we use to develop code has now gone online as preview (check the Preview Features page on the Windows Azure Portal).

- What can we do now?
- Live, real-time changes to a Windows Azure Web Site!
- Really !? How?

First you need to create new VSO account, if you don’t already have one (please waste no time but get yours here!). Then you need to link it to your Azure subscription! Unfortunately (or should I use “ironically”?) account linking (and creating from within the Azure management portal) is not available for an MSDN benefit account, as per FAQ here.

Link an existing VSO account

Once you get (or if you already have) a VSO account, you can link it to your Azure subscription. Just sign-in to the Azure Management portal with the same Microsoft Account (Live ID) used to create VSO account. There you shall be able to see the Visual Studio Online in left hand navigation bar. Click on it. A page will appear asking you to create new or link existing VSO account. Pick up the name of your VSO account and link it!

 

Enable VSO for an Azure Web Site

You have to enable VSO for each Azure Web Site you want to edit. This can be achieved by navigating to the target Azure Web Site inside the Azure Management Portal. Then go to Configure. Scroll down and find “Edit Site in Visual Studio Online” and switch this setting to ON. Wait for the operation to complete!

Edit the Web Site in VSO

Once the Edit in VSO is enabled for you web site, navigate to the dashboard for this Web Site in Windows Azure Management Portal. A new link will appear in the right hand set of links “Edit this Web Site”:

The VSO IDE is protected with your deployment credentials (if you don’t know what is your deployment credentials, please take a few minutes to read through this article).

And there you go – your Web Site, your IDE, your Browser! What? You said that I forgot to deploy my site first? Well. Visual Studio Online is Visual Studio Online. So you can do “File –> New” and it works! Oh, yes it works:

Every change you make here is immediately (in real-time) reflected to the site! This is ultimate, the fastest way to troubleshoot issues with your JavaScript / CSS / HTML (Views). And, if you were doing PHP/Node.js – just edit your files on the fly and see changes in real-time! No need to re-deploy, re-package. No need to even have IDE installed on your machine – just a modern Browser! You can edit your site even from your tablet!

Where is the catch?

Oh, catch? What do you mean by “Where is the catch”? The source control? There is integrated GIT support! You can either link your web-site to a Git (GitHub / VSO project with GIT-based Source Control), or just do work with local GIT repository. The choice is really yours! And now you have fully integrated source control over your changes!

No comments: