Visual Studio Online Monaco Code Editor Walk-through - Part 2

In the part 1 of this series you learned how to edit compiled websites using Visual Studio Online Monaco Editor. Now in this part you will learn how to edit source code of website. Read my previous post or at least first paragraph of that post.

I repeat, Monaco is a new browser-based coding tool, it is a part of the Visual Studio Online service and TFS, to complement its traditional desktop development environment. The Monaco browser-based development tool will work initially with Windows Azure websites, letting developers edit, build sites from the web out of the box. And also supports version controlling with GitHub.

Editing Source Code of Azure Website using Monaco Editor

In order to edit source code we need to create two different Azure Websites. First Azure Website will publish from source control (GitHub) and second Azure Website will clone the GitHub source code to allow us editing with Monaco Editor.

Create First Azure Website that publish from source control

Step 1: Source Control Repository

Create any web project in Visual Studio and push it to GitHub or any other source control repositories (TFS, Dropbox, CodePlex etc.). I’m not going to talk about how to create source control repositories, this is simple, many articles available online. I’m going to use my one of the project up on GitHub.

Once we have a source control repository, go to next step.

Step 2: ‘Custom Create’ First Azure Website

Open Azure portal and ‘Custom Create’ an Azure Website and remember to check to select ‘Publish from source control’.

Go to next window and select your source code repository, in the image given below you can see I have selected GitHub.

After selecting source code repository name go to next window where it will authorize your GitHub account, you should be admin of that source code because Azure Website is going to perform continuous deployment with GitHub that need admin authentication. When you select GitHub as source control, you will see list of all GitHub projects. Select one from drop down list which you want to continuous publish to Azure Website.

Now, hit ok. It will create a brand new website and also sync and enable continuous publish from your GitHub project which you selected above. Whenever we do a new commit and push from Visual Studio to GitHub (or from Monaco to GitHub, will see later), you will see a new Deployment running on this page, image given below.

Please note, sometimes it fails when any of the assembly (packages) mismatches with the running framework, so make sure you are good to go.

Step 3: A Running Website

And here is a running website after successful deployment in above step.

Do not turn ‘ON’ editing this azure website in “Visual Studio Online ‘Monaco’”, because this is published project/website (aka compiled website) not complete source code of website, if you enable it here you will again repeat what we learned in part 1.

Now let’s go ahead and create our second Azure Website, this will clone the GitHub source code.

Second Azure Website will clone the GitHub source code

Step 1: ‘Custom Create’ Second Azure Website

Once we have a project with synced and continuous deployment from GitHub repository. We can go and create one more azure website which will allow us editing the source code. So, let’s ‘Custom Create’ an Azure Website and do not select ‘Publish from source control’, image given below.

You will notice, we have used website URL with ‘-development’, this is just a friendly name for our development website which contains source code and user/visitor can’t access this site, you will see it in Step 6. So, we have two websites in total. First one is production website and second one is development website.

Step 2: Enable Website Editing in Monaco Editor

Now in visualstudioonlinemonaco-development website click on ‘CONFIGURE’ tab and you will find an option ‘Edit in Visual Studio Online’, just click it to ‘ON’ and save the changes, and notice it is still in Preview mode.

Once you done, you will notice a new link ‘Edit in Visual Studio Online’ on ‘DASHBOARD’ tab.

Click on that link, it will open a page on new browser tab, and you will see project connected with Monaco editor. You will also notice a default page provided by Azure Website.

So we are in Visual Studio Online ‘Monaco’ editor, now we are good to go and clone the GitHub project, given in next step.

Step 3: Clone from GitHub

In the left side menu you will find Git option, click it. This project is not yet connected to any source control repository (if you remember, we have not selected this in Step 1), so you will see following window.

Step 4: Copy git URL from GitHub

Visit your GitHub repository page and copy the git URL.

Once you have git URL in the clipboard, you can proceed to next step.

Step 5: Paste Repository Git URL to Clone from GitHub

Here you need to paste that git URL and click to clone it, marked in image below.

You can also clone this using web based console sitting left side, look at the image given below. So this code is cloned and synced with GitHub source code. Also notice how intellisense is working. Awesome.

After quick processing you will see your project source code (not complied website code) in the explorer, I marked that in above image.

So we are all set to edit and build codes in the browser. This enables huge possibilities, we can access this from any device you think. Super cool.

I am going to continue the steps, and in each step we will explore something very cool.

Step 6: What if we try to access development website?

You might ask a question here, what if someone try to access this http://visualstudioonlinemonaco-development.azurewebsites.net website? Aaah! Look at this.

Step 7: How to edit HTML/C# Code and build the solution and git push?

Just select the code file you want to edit and in the right side you will see the codes, just edit them and you are half done. After editing you are one step back from browsing the website to check.

I would like to recall following points again:

1. In Step 5 we cloned our git repository with Azure Website ‘visualstudioonlinemonaco-development’.

2. In Step 6 you seen we can’t access this website because this website is cloned and synced with GitHub and it has all the codes.

3. I mentioned, in Step 2 that on each commit/push from Visual Studio IDE, a new deployment will occurs, similarly here with Monaco a new deployment will take place on each commit and ‘git push’ command. This command will update GitHub source code (because this Azure Website and GitHub sources are in sync) and then GitHub will issue a new deployment to the production azure website.

Here is what I have sketched for this.

In case you want to see just 90 sec video on this, here it is.

I hope you got the idea.

Step 8: Intellisense Support

Unlike Visual Studio IDE this Visual Studio Online Monaco Editor got several features, intellisense support is one of them. White typing in console press ‘Ctrl+Space’ to bring the intellisense.

In above image you can see how intellisense appeared for git commands.

Step 9: Self closing tags

This is also one of awesome feature. Unlike Visual Studio IDE it also support self-closing of tags.

So, there are many-many more features that we should know, this article is turning very long so I will discuss more features in other post.

Hope you like it. Thanks.