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
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
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
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
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
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
Visual Studio Online: WebMatrix personal site.
Click on image to zoom in.

Resources

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!

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    5 thoughts on “First look at Visual Studio Online “Monaco”

    • November 14, 2013 at 7:58 pm
      Permalink

      Is there a way to access Monaco without using Azure? I like the idea of an online IDE, but I don’t know that I want to host the application I’m working on in Azure.

    • November 14, 2013 at 9:00 pm
      Permalink

      Monaco is available only for Windows Azure Web Sites and works only files files on Web Sites account. This is like SharePoint Napa Tools IDE (very similar one) works only in Office 365 SharePoint Development site and publishes files only to app catalog.

      There is currently no Visual Studio available online that works for all files and projects. But I’m very sure that full online Visual Studio is on the way already.

    • Pingback:Reading Notes 2013-11-25 | Matricis

    • May 28, 2014 at 1:16 am
      Permalink

      It’s clearly a major drawback that Monaco doesn’t support .NET Web Application projects (like desktop VS does) and can’t WebDeploy to Azure VM’s and Cloud Services. It severely limits the usefulness of Monaco for most .NET developers. The team doesn’t seem to have said what their plans are for making Monaco a fully featured SaaS VS IDE. Everyone reading this should up-vote my question about their roadmap on the MSDN Forums.

    • July 14, 2014 at 9:26 am
      Permalink

      Luke, MS is coming to online IDE-s world from more than one direction. What we have for now:

      – VS Online supporting Office 365 online development
      – Monaco
      – Windows Phone App Studio (online IDE to build simple WP apps)
      – some DIY stuff for Windows 8 apps

      I think that in some point in time all this IDE-s will be put together to Visual Studio Online.

    Leave a Reply

    Your email address will not be published. Required fields are marked *