Stand-up: Developing a node.js application using Monaco (Part 1)

Stand-up: Developing a node.js application using Monaco (Part 1)

Rate This
  • Comments 4

We continuously use Monaco to develop Monaco. Since Monaco is implemented in TypeScript this gives us great coverage for TypeScript development. From time to time we also want to validate the experience for other languages. In a series of blog posts I will describe my journey for developing a small, but nevertheless useful web site on Microsoft Azure. The web site is implemented in JavaScript using popular libraries. Along the way I will describe some best practices and guidance how to use Monaco for node.js application development.

If you are interested in other parts of this series, please use the links below:

  1. Part 1: Introduction
  2. Part 2: How to configure the workspace for IntelliSense
  3. Part 3: Using Mocha for server side unit testing
  4. Part 4: How to debug node.js applications on Azure
  5. Part 5: How to connect to an existing workspace using source control
  6. Part 6: Best practices leveraging development and production sites

Choosing a project

Finding an application to work on didn’t take very long. In our team, we do daily standups where we talk about the work we have done in the previous day and what we plan to work on during the day. One of our challenges is that we tend to talk too long and as a consequence the meeting runs for too long.

We wanted to build a simple web site that helps us with the time tracking of our standups. This should be a modern web site, driven by a node.js server that one can access from any device with ease. It should use state of the art libraries and be backed by a Git repository to collaborate on the source code. Our technical choices boiled down to

  • Express and socket.io on the server
  • Bootstrap, jQuery and requireJS on the client

We are very happy with the result. In a couple of days I was able to use Monaco to create a nice stand-up time tracking application that works on any device and synchronizes changes live between users through socket.io. I added some additional features to show the average speaking time of each speaker and as a bonus, I put the image of the day from Bing.com as a background image.

The final result is available from CodePlex at https://monacostandup.codeplex.com/

First steps – Installing the libraries

The first thing to start using Monaco for editing your web site is to have an Azure web site with Monaco enabled. We have a nice First Steps video on Channel9, so I will not repeat the steps here.

Express is a very popular web framework for node.js. We have some history with it, because it is also the framework that is used to run Monaco. Getting started with Express is straightforward. We can use Monaco’s console (Ctrl+Shift+C) to install Express through the node.js package manager (npm):

npm install express@3.5.1

The console will show you the output from the running npm command:

If you take a look at the Explorer to the left you will notice a new folder “node_modules” that contains the Express web frame work.

To use Express, create a new file app.js and paste the following lines:

var express = require('express');

var app = express();

app.get('/', function(req, res){
res.send('Hello World');
});

var server = app.listen(process.env.PORT, function() {
console.log('Server started!');
});

One important aspect of running the server on Azure is the use of process.env.PORT instead of assigning a fixed port number. Azure will make sure to assign a port number for your application so that you don’t have to care about it. But for this, Azure asks you to receive the port number out of the environment and not hardcode it.

Finally, press the Run button in the activity bar to the left or hit Ctrl+F5 to launch your application.

You will notice some output in the output view after you run the website. The output window splits the currently open editor so that you can see the output side by side to the open editor. This window is used to collect and show all output from the running website. It also provides guidance in case your application does not run properly. Since it is the first time you run the site, the output window informs us that a web.config file was created in your workspace root. Understanding how Azure runs your node.js application can be quite helpful. Under the hood, your application is being run using IIS Node and as such the web.config is needed to instruct IIS Node, e.g. to pick the correct startup file for your server.

You don’t have to make any changes to web.config but you can open the file to learn a little bit more about how your application is executed. If you look at the <handlers> section you can see that the IIS Node handler is configured for the ‘app.js file we created before:

<handlers>
<!-- Indicates that the app.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
</handlers>

If you look at the end of the file you will notice a watchedFiles property:

<iisnode watchedFiles="web.config;*.js"/> 

This instructs IIS Node to restart your server anytime web.config or any other top level JavaScript file is touched. In other words, as soon as you make a change to app.js your server will be restarted to pick up your changes when it receives the next request. A good summary of options you can set for IIS Node is available from here.

I was able to do the majority of my development running the site in ‘Free’ mode. When doing major operations like large NPM installations, you might run into some of the quotas enforced for free sites. One example is a quota about the amount of CPU time a site may consume over a specific time period. If your console operations consume a lot of CPU in a short period, this quota limit can be reached quickly.

Monaco will indicate to you when this situation happens as you can see from the screen shot below:

 

If this happens you can either wait a short amount of time until the quota is lifted, or scale your web site to ‘Shared’ or ‘Standard’ mode. Keep in mind though that scaling a web site up might come with additional charges to your subscription.

It is always a good practice to consult the Azure dashboard of the website when this happens. When you open the dashboard on your site, you should see a similar warning on top:

From the “Scale” tab of your site you are able to upgrade the web site mode to ‘shared’ or ‘standard’:

 

Conclusion

This first blog post on the standup application gives you a quick introduction to using Monaco for node.js development using Express. You have learned that on Azure node.js web sites are executed through IIS Node and thus some configuration goes into the web.config file. Monaco generates this file for you as needed and you typically don’t have to change it.

In the next blog post I explain how to setup IntelliSense for node.js and Express to make the development experience pleasant.

 

 

Leave a Comment
  • Please add 8 and 2 and type the answer here:
  • Post
  • Guys, you need to promote this blog more! I can't believe I've only just found it after 4 months. All that I could ever find was the original few videos on channel9. Anyway just want to say that I love Monaco and think it's one of the best things to come out of MS. Keep up the good work guys!

  • Hi! Great article.

    I just tried creating a website, managing it with Monaco. I installed express and installed bower, but there seems to be some problems with bower in the Monaco console. It takes a really long time for Bower init to do anything and then it complains about the console being not interactive.

    Do you have any experience with that?

    Thanks

     Andreas

  • It is true that bower needs a while to execute and this is mainly due to the large dependencies this command seems to have and load when executed. Unfortunately there is currently no workaround for this unless you would manually go and reduce the dependencies by hand.

    As for interactive commands: Monaco does currently not support interactive commands in the console, but this feature is on our backlog. Thanks for trying out Monaco!

  • Hi, please help...when I npm-install other modules such as socket.io and node.expat under console, I received the following message:

    D:\home\site\wwwroot\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws>node "D:\Program Files (x86)\npm\1.3.11\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild

    Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.

    MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe". To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visual Studio 2005 or 3) add the location of the component to the system path if it is installed elsewhere.  [D:\home\site\wwwroot\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\binding.sln]

    MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe". To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visual Studio 2005 or 3) add the location of the component to the system path if it is installed elsewhere.  [D:\home\site\wwwroot\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\binding.sln]

Page 1 of 1 (4 items)