First look at Visual Studio Online “Monaco”

With Visual Studio 2013 Microsoft also announced online version of Visual Studio for Windows Azure Web Sites. When I first saw SharePoint Napa tools and “powered by Vsiual Studio” slogan then I knew that soon Visual Studio is on cloud. Now Microsoft made their next step. Let’s see what Visual Studio Online with codename “Monaco” is and what you can do with it.

From Visual Studio Online November 2013 updates we can read about “Monaco” the following: “With Monaco, we want to provide developers with a lightweight, friction free companion to the Visual Studio desktop IDE that is accessible from any device on any platform. Monaco is a rich, browser based, code focused development environment optimized for the Windows Azure platform, making it easy to start building and maintaining applications for the cloud.”

Getting started

You need Windows Azure account to get started. If you just want to play with Windows Azure you can also take Windows Azure trial – it’s free until you don’t do anything too big. If you have Windows Azure account then follow this steps:

1. Log in to Windows Azure management portal.
2. Create new web site.
3. Open site settings and go to Configure page.
4. Scroll down a little bit and turn “Edit in Visual Studio Online” on.
5. Go to web site dashboard and click on “Edit in Visual Studio Online” link.

Now Visual Studio Online opens in new browser window and you can start building your site online.

Visual Studio Online: Quick start.
Click on image to zoom in.

Testing with simple pages

I successfully created to test pages – one that uses classic ASP.NET mark-up and the other that uses Razor. Here’s the ASP.NET one. It has just some simple HTML and ASP.NET tags to print out current date and time.

Visual Studio Online: Simple ASP.NET page.
Click on image to zoom in.

When you are done with your modifications and you want to run your application then simply click run and you will see build messages on screen. After successful build you can open your web site and see changes.

Visual Studio Online: Console Output.
Click on image to zoom in.

There is no good syntax highlight and other powerful features that desktop version of Visual Studio offers you but still you can code online having just browser running on your machine.

Editor commands

Visual Studio “Monaco” supports editor commands – shortcut keys to make you some editing tasks more convenient.

Visual Studio Online: Editor Commands.
Click on image to zoom in.

Although there are is pretty small set of commands available currently we can expect more commands to come. You see, there is search box below commands. We don’t need it just for 20 commands.

Comparing files

If you want to compare files then it is easy. Just right click on files and select them for comparing. This is how you see files when comparing them.

Visual Studio Online: Comparing files.
Click on image to zoom in.

WebMatrix personal site

I connected WebMatrix to my web site and created personal site based on personal site template. It illustrates better how files look in new editor.

Visual Studio Online: WebMatrix personal site.
Click on image to zoom in.

Resources

• Visual Studio Online updates – Nov 13
• Visual Studio Online “Monaco” @ Channel 9
• Visual Studio 2013 Launch event

Conclusion

Quick first look at Visual Studio Online “Monaco” makes me feel like WebMatrix is getting online because I don’t see there much Visual Studio desktop features that should be elementary for all developers. Still it is next big step by Microsoft towards online Visual Studio that is browser based and rund somewhere in the cloud. Let’s not forget that Windows Azure Web Sites are already integrated with Team Foundation Services and so is Visual Studio Online “Monaco”. What it means? We have online IDE with source control support!