11

I've recently been using Visual Studio Online 'Monaco' to edit an AngularJS application that I have hosted as an Azure website. I want to use Monaco as it has in-browser typescript support.

As far as I can tell the only place to get to Visual Studio Online 'Monaco' is via a well hidden link on an associated Azure Website's Dashboard, down the bottom of the page on the right hand side.

E.g. the final access url ends up being:

https://your-website-dev.scm.azurewebsites.net/dev/wwwroot/app/scripts/services/sampleService.ts

Is this the only place to get to Monaco?

It appears to be a good alternative to Cloud 9 and Nitrous.io for development of Typescript and .Net solutions but I'd like a more Nitrous.io style way of setting up dev environments. e.g. log in, clone from github, start coding.

Edit: From replies over time to this question...

As of Dec 2015 Visual Studio Code is an excellent locally hosted version similar to Atom but with a Visual Studio vibe, and cross platform:

https://code.visualstudio.com/

As of July 2015 an option in the Azure Web App Dashboard has appeared.

To enable Visual Studio Online for a web app:

  • Go to the 'configure' tab of the web app
  • Switch the 'EDIT IN VISUAL STUDIO ONLINE' on, click Save
  • An 'Edit in Visual Studio' option appears on the dashboard tab under the 'quick glance' area
  • Clicking on this takes you to the VSO pointing at your web app
    • Note: If you deploy via git etc your vso changes may be overwritten
j3r3m7
  • 742
  • 9
  • 21

5 Answers5

11

As of July 2016 in the new portal

This has been renamed to App Service Editor.

App Services => Your App => Tools => App Service Editor (Preview)

Click go in the panel that opens up to navigate to

https://yourapp.scm.azurewebsites.net/dev/wwwroot/

Update to add pic (by Luke)

Menu item within Tools

Luke Puplett
  • 42,091
  • 47
  • 181
  • 266
csmacnz
  • 331
  • 3
  • 8
5

At this point in time, the only way you can edit code online is via the link in the Azure portal (or by using the url directly as you've done).

I presume that Monaco will show up on other Microsoft properties at some point in time, but that's just a guess.

UPDATE: A lot has changed since this answer was given. The summary added to the the question provides a good overview of Monaco's usage, though you should also add to the Typescript Playground. The VSCode team is even looking to make Monaco available as a standalone tool you can use in your own apps (see GH issue)

P.S. VSCode is built on top of Electron and, being open source, you can look at the code of the Monaco editor today.

Richard Banks
  • 12,456
  • 3
  • 46
  • 62
2

UPDATE 11/23/2015: The Monaco editor was open sourced last week (as part of vscode). The vscode repository is also the repository for Monaco.

Visual Studio Code is Microsoft's new desktop editor that is built on web technologies and the editor component is Monaco.

See: What is the Visual Studio Code editor built on

Community
  • 1
  • 1
Sevin7
  • 6,296
  • 4
  • 23
  • 31
2

As of today, it is accessed by adding the Visual Studio Online extension to your website and then clicking "Browse" at the top when the extension is selected. It is unclear why Monoco is so hidden, perhaps they want to wait until it is "done" before doing a big push?

Micah Zoltu
  • 6,764
  • 5
  • 44
  • 72
  • Good spot! In the original Azure dashboard you need to go to the 'configure' tab of the web app, switch the 'EDIT IN VISUAL STUDIO ONLINE' on, save, then an 'Edit in Visual Studio' option appears on the dashboard tab under the 'quick glance' area. – j3r3m7 Jul 03 '15 at 15:40
2

As of January 2016 in the new portal

App Services => Your App => Tools => Extensions => Add + => Visual Studio Online

Going back through that chain and selecting "Browse" will navigate you to

https://yourapp.scm.azurewebsites.net/dev/wwwroot/

Daniel E
  • 529
  • 1
  • 4
  • 18