The Azure team has been hard at work developing the next generation Azure Portal that brings development and operations together into one unified experience. This quick post will show you how to enable and launch Visual Studio Online “Monaco” for your Azure Website in the new portal.

Launching the new Portal

If you have not bookmarked or memorized https://portal.azure.com/ yet, the current portal provides a number of opportunities to make the switch. For example, when you narrow your scope to Web Sites on the left of the existing portal, you’ll get a nice popup asking you if you would like to try the Preview.

clip_image002

Create a new Web Site

Once in the new portal, let’s create an Azure Web Site that we will eventually edit in “Monaco”. On the start page, click on the “Azure Gallery” in the lower left corner. Note, you can click anywhere in the 9 block area, it is all one big tile.

clip_image003

This will open a Gallery Blade. Click on “Web” and then choose a Web Site template. In this case, I’m choosing the “HTML5 Empty Site” so that there will be at least one interesting file in my workspace once we open it in “Monaco”.

clip_image005

The next blade that appears is meant to provide more information on the type of Web Site you are creating. This site is pretty minimal so we only see the description and publisher. Click “Create” to choose this template and proceed to name your site, optionally specifying the web hosting plan, resource group, subscription, and location.

clip_image007

Once the site is created a new tile will appear on the Start Page providing you with a nice shortcut to your site. The site’s blade is opened by default and once running for some time you’ll see interesting statistics about the health of the site.

clip_image009

Existing Web Sites

If you have already enabled “Monaco” on an existing Web Site using the current Azure Portal, there is no way to launch the Workbench from the new Portal. You will need to enable “Monaco” again. To get to your Web Site blade, choose “BROWSE” from the Activity Bar on the left side of the new Portal, choose “Websites”, and then click on the site you want to edit. This will open the Site’s blade where we can configure “Monaco”.

clip_image011

Enabling “Monaco”

Now that we have a site created, we want to edit it in “Monaco”. First, a little background. “Monaco” is implemented as an Azure Site Extension. It is preinstalled on all Azure Web Site VMs and needs to be enabled in order to access the URL that serves the Workbench. In the current portal this entails turning on the extension on the CONFIGURE tab prior to being able to launch it from the “quick glance” section on the DASHBOARD.

In the new Azure Portal, you enable the “Monaco” extension by installing it. Scroll down to the bottom of the site’s blade and choose “Extensions” in the “Configuration” section.

clip_image013

This will open a new blade that shows all of the extensions installed for the site. We don’t have any so we will click on the “ADD” command, select “Visual Studio Online” and then accept the legal terms.

clip_image015

Once the extension is installed you can select it, click the “BROWSE” command at the top of the blade, and launch the “Monaco” workbench.

clip_image017

Success!

clip_image019

Fast Access to your Development Environment

One of the cool features of the new Azure Portal is the ability to customize your Start Page. What I like to do is pin the Visual Studio Online blade to give me fast access to “Monaco” when I start the Portal. To do this, click on the pin icon on the top of the extension’s blade.

clip_image020

This will create a new tile on the Start Page. You can then right click on the Start Page and choose “Customize” to move and size tiles. Here I’ve placed the tile prominently in the upper left corner of my Start Page.

clip_image022

Now I can right click on the tile, choose “Browse” and in two clicks I’m in the “Monaco” workbench

clip_image023

Managing the Extension

As mentioned earlier, the “Monaco” service is preinstalled on all Azure Web Site VMs. Updates to the service are rolled out automatically so you won’t need to “UPDATE” the extension manually.

If you want to disable access to “Monaco” for your site, you can simply use the “DELETE” command. This won’t delete the code in the site, it simply turns off the the endpoint once you restart the site.

clip_image024

If you have any feedback or questions, please let us know!

Chris Dias