Grunt + TypeScript + VSO Monaco = ❤

On Channel9 we published a video demonstrating how to compile TypeScript into JavaScript using the console and the command line compiler. This works well, but as you get more serious, manual compilation seems like a slowdown and people feel an itch for automation. From our users we receive feedback that reads like this:

“I don’t want to jump to the console after each change to compile the Typescript files.”

Agreed, and luckily there is help! VSO Monaco provides a rich console that supports the NodeJS package manager (npm) so that you can easily install node based tools. For most teams Grunt is part of their tool chain and grunt enables to automate TypeScript compilation with either grunt-ts or grunt-typescript. Setting things up is straightforward. A step by step guide can be found here: Automating TypeScript with Node and Grunt.

If you have followed the guide above grunt will be configured to compile TypeScript files whenever they change. Here is a sample gruntfile - inside of it you will find a watch task that waits for file changes so that it can begin compilation. Watching for file changes and Monaco's auto-save feature effectively enable automatic compilation.

Because the watch tasks runs continuously it is convenient to start it in a separate console. You can do that from the menu in the upper right corner

While coding you can have the editor side by side to the console or hide the console. Select the close icon in the upper right corner to hide the console and a little badge icon on console launcher will tell you that the command is still running. Selecting that will restore the console view.

We have talked about automating TypeScript compilation but grunt can do a lot more. For instance, there is support for SASS, LESS, and CoffeeScript automation. And of course, there is not only grunt but also other build tools. For instance, automated compilation can be achieved with gulp.js too.

Monaco runs as a site extension inside your Azure Website. There is a great video about site extensions and with respect to Monaco you should know that resources like CPU, data, and network are accounted against your web site's quotas. When developing with automated compile enabled, you will use more CPU cycles and therefore you might hit your quotas faster than usual. As shown in the screen capture from the a web site's dashboard on the azure portal, the first quota you will likely run into is the "CPU time - minute limit". In free mode you have 2.5 minutes per 5 minutes.



For Azure Websites there are four hosting plans: Free, Shared, Basic, and Standard. More about them can be found here or in this Azure Friday session: ‘Inside Azure Web Hosting Plans’ 

For this blog I want to focus on the CPU related quotas. When running with the Free or Shared plans your website shares compute power with other websites and therefore quotas are needed. Those are strict and if the used CPU time exceeds more than 1 hour a day (4 hours, respectively) or 2.5 minutes during 5 minutes your website will be suspended. Because no one wants a suspended development box, you need to do something...

If your website already runs under Basic or Standard plans you don't have to worry about the CPU quota. However, if your website is bound to quotas you might have to choose a different plan while developing. Selecting a plan isn’t a lifetime decision and you can jump between plans as you like. Image you need to make changes to your website and those changes will take 4 hours to complete. Switching to the Standard plan for that time will cost you just $0.80 (medium sized VM, 4 * $0.20). That is not bad for a development box that is available to you no matter where you are or whatever device you use.

Give it a try, create a website, enable Monaco, and get started with our TypeScript & grunt sample.

Comments (0)

Skip to main content