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.
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.
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.
Then type the follow command to see the Node.js version installed on your machine.
Node.js Projects, NPM, Editor and IntelliSense
|- 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.
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.
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.
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.
The "package.json" file had been updated as well.
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.
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".
And the functions defined in "express" can also be supported by NTVS IntelliSense.
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.
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.
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.
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.
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.
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,
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.