Shaun Xu

The Sheep-Pen of the Shaun


News

logo

Shaun, the author of this blog is a semi-geek, clumsy developer, passionate speaker and incapable architect with about 10 years experience in .NET. He hopes to prove that software development is art rather than manufacturing. He's into cloud computing platform and technologies (Windows Azure, Aliyun) as well as WCF and ASP.NET MVC. Recently he's falling in love with JavaScript and Node.js.

Currently Shaun is working at IGT Technology Development (Beijing) Co., Ltd. as the architect responsible for product framework design and development.

MVP


May I firstly ask a question for developers writing Node.js application on Windows platform, which editor are you using currently. Being a geeks working with Node.js on Windows for about 1.5 year, I used to use NotePad ++ for the first half a year. Then I switched to use Sublime Text till now on Windows and Mac. I also tried to use WebStorm but give up as I really don’t like its UI, although I knew it’s a powerful tool for web and Node.js development.

Today I was informed that Microsoft publish a new tool that allow us to develop, debug and deploy Node.js application in Visual Studio. And I think this is what’s I’m looking for.

 

Installation

Node.js Tools for Visual Studio (a.k.a. NTVS) is a free and open source plugin that turns Visual Studio into a Node.js IDE. You can download its first alpha release here. It’s supports Visual Studio 2012 and 2013.

image

Since this is just a plugin, so we must have Node.js installed on the machine. To download Node.js you can go to its website and click the install button. It will download the proper package based on your system.

Once you have the tool installed you can launch Visual Studio to verify its status. Open the menu item from View >> Other Windows >> Node.js Interactive Window.

image

Then type the follow command to see the Node.js version installed on your machine.

image

 

Node.js Projects, NPM, Editor and IntelliSense

NTVS provides several new project templates for Node.js. When you create a new project, you can find there are six new templates available under JavaScript category.

image

- From Existing Node.js code This will brings up a dialog to helps you create a Node.js project from the existing code files.
- Blank Node.js Console Application Node.js application on console without any modules pre-installed.
- Blank Node.js Web Application Node.js application that listens on a port by default without any modules pre-installed.
- Blank Express Application Node.js application with Express module pre-installed.
- Blank Windows Azure Node.js Application Similar as "Blank Node.js Web Application", with some scripts to prepare Node.js environment when publishing to Windows Azure.
- Blank Windows Azure Express Application Similar as "Blank Windows Azure Node.js Application", with Express module pre-installed.

 

Let's create a very basic Node.js application from the "Blank Node.js Web Application" template. It created three files for us. "server.js" is our application entry code contains some sample code. "README.md" file is a readme file which could be used and displayed if we push to GitHub. "package.json" is the configuration file of this application which contains the name, description, author as well as the dependence modules.

image

If you are familiar with Node.js application development, you must know NPM. NPM is a Node.js package management program. We can search, install, uninstall any Node.js modules through the NPM command line tool.

NTVS has a build-in NPM management dialog for us to search, install and uninstall NPM modules. In the "Solution Explorer" there's an item named "npm" which contains all modules our application installed. And we can right-click this item and select "Manage npm Modules" to open the NPM dialog.

image

The NPM Package Management dialog was divided into two parts, installed packages and package sources. To install a new module, we can just specify the package name and optionally its version or tag from the package sources part and click "Install Locally" button, then it will execute relevant NPM command to install the module, and it will update the "package.json" file accordingly so that in the future we can reinstall or update all necessary modules easily.

As the screenshot below I installed "express" module into my Node.js application.

image

Then in the "Solution Explorer" the "express" module will be shown under the "npm" item. And it will show all sub-dependence modules as well.

image

The "package.json" file had been updated as well.

image

NTVS doesn't support install missed modules from "package.json" in this Alpha release. But this feature will be included in Beta as Microsoft mentioned. Currently we can right-click on the project item and select "Open Command Prompt Here" to open the command window, then execute "npm install" command manually to install all missed modules defined in "package.json" file.

Anther feature of NTVS is the Node.js code editor. It's syntax highlight and IntelliSense. When we are typing the code, it will brings the IntelliSense window to us.

image

And the IntelliSense supports not only those build-in Node.js modules such as "http", but the 3rd party modules we installed from NPM. For example, below is the IntelliSense for "express".

image

And the functions defined in "express" can also be supported by NTVS IntelliSense.

image

 

Debug

NTVS integrates Visual Studio with the "node-inspector" module for Node.js debugging. We can specify a breakpoint in the code editor, hit F5 to execute our application in debug mode. Then it will be paused by our breakpoint where we can step over, step into, watch variants etc.. from Visual Studio in the way we are familiar with.

image

 

Windows Azure Support

Another benefit of using NTVS is it supports Windows Azure deployment. We can publish our Node.js project to Windows Azure Web Site by simply click the "Publish" item in the context menu of the project item.

image

Then in the publish dialog we can create a new Windows Azure Web Site, or specify an existing Windows Azure Web Site for this application, and publish it through Web Deploy or FTP.

image

But one thing must be pay attention here. If we are using Web Deploy or FTP to publish our Node.js application to Windows Azure Web Site, we MUST include the "node_modules" folder into project to ensure it could be uploaded along with our codes.

image

But if we are using Git or GitHub integration for Windows Azure deployment, we don't need to include "node_modules" since the Windows Azure Web Site Git deployment command will trigger "npm install" command remotely to install all necessary modules when deployment on the cloud.

 

Summary

In this post I demonstrated the Node.js Tools for Visual Studio which has just been published its first Alpha release by Microsoft. It brings Node.js IDE into Visual Studio 2012 and 2013 which includes many cool features such as project templates, code editor with syntax highlight and IntelliSense, NPM package management, debugging and profiling, and Windows Azure deployment. With this new tool we can develop and deploy our Node.js application without leaving Visual Studio.

The document can be found here. Scott Hanselman has an awesome blog post about this tool as well here.

 

Hope this helps,

Shaun

All documents and related graphics, codes are provided "AS IS" without warranty of any kind.
Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.

Comments

No comments posted yet.
Post A Comment
Title:
Name:
Email:
Comment:
Verification: