Building Node.js Projects in Visual Studio

Node.js Tools for Visual Studio ( NTVS), is an open-source Visual Studio plugin that transforms Visual Studio into a IDE for developing Node.js apps. Node.js has become extremely popular, as a server-side runtime environment for JavaScript apps; and this plugin brings the possibility for Visual Studio users to take advantage of their knowledge of the IDE to work with Node.js code. It includes IntelliSense, a Node.js interactive window, debugging and profiling, among other features. In this article, I provide an example of the usage of these features.

Writing Node.js code in Visual Studio and Using IntelliSense

You can download the latest version of Node.js Tools for Visual Studio here. At the time of writing, the latest version for Visual Studio 2013 was 1.0 Release Candidate. It is very stable and allows you to use Visual Studio 2013 as your IDE for Node.js projects without major problems. In the event you've worked with the previous versions of the plugin, you should upgrade because this release resolved many bugs and crashes. The project is developed and supported by Microsoft and the community. It is important to note that there is already a version that works with the Visual Studio 2015 preview, so you can expect that the forthcoming Visual Studio version will also allow you to use it as the IDE for Node.js projects.

Node.js Tools works with your existing Node.js installation. In fact, when you execute your Node.js project, the IDE will run the installed node.exe. The Visual Studio debugger uses the node V8 debugger under the hood, but you work with the IDE in the same way and with the same windows you are used to interacting with when coding in C# or other Visual Studio supported languages.

Once you install the tools, the New Project dialog box in Visual Studio provides the following new templates under Installed | Templates | JavaScript | Node.js:

• Azure Cloud Service
• From Existing Node.js code
• Blank Node.js Console Application
• Blank Node.js Web Application
• Basic Node.js Express 3 Application
• Starter Node.js Express 3 Application
• Basic Node.js Express 4 Application
• Blank Azure Node.js Web Application
• Blank Azure Node.js Express 3 Application
• Starter Azure Node.js Express 3 Application
• Basic Azure Node.js Express 4 Application

Start a new project with the Blank Node.js Web Application template. You can use IntelliSense to replace the code in server.js with the following lines. This code uses the HTTP and URL libraries to create a very simple Node.js REST API that is capable of processing an HTTP GET status method with some parameters.

Listing One: Creating a simple REST API.

// Require the HTTP library
var http = require("http");
// Require the URL library
var url = require('url');

var port = process.env.port || 1337;

var server = http.createServer(function (request, response) {
    
    var parsedUrl = url.parse(request.url, true);
    var query = parsedUrl.query;
    
    if ((request.method == 'GET') && (parsedUrl.pathname == '/status')) {
        status(query, response);
    }
});

function status(query, response) {
    
    var cameraToQuery = 0;
    var detectedFacesCount = 0;
    var globalStatus = 'N/A';
    var lensStatus = 'N/A';
    var environmentScore = 0;
    if (query.position) {
        switch (query.position) {
            case 'front': cameraToQuery = 1;
                globalStatus = 'OK';
                lensStatus = 'OK';
                environmentScore = 4;
                detectedFacesCount = 300;
                break;
            case 'back': cameraToQuery = 2;
                globalStatus = 'OK';
                lensStatus = 'OK';
                environmentScore = 3;
                detectedFacesCount = 150;
                break;
            case 'left': cameraToQuery = 3;
                globalStatus = 'OK';
                lensStatus = 'OK';
                environmentScore = 3;
                detectedFacesCount = 200;
                break;
            case 'right': cameraToQuery = 4;
                globalStatus = 'OK';
                lensStatus = 'OK';
                environmentScore = 2;
                detectedFacesCount = 170;
                break;
        }
    }
    
    console.log("Requesting status information for camera #: " + cameraToQuery);    
    
    // Write the response HEAD
    response.writeHead(200, {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "X-Requested-With"
    });
    
    var obj = {
        cameraId: cameraToQuery,
        globalStatus: globalStatus,
        lensStatus: lensStatus,
        environmentScore: environmentScore,
        detectedFacesCount: detectedFacesCount, 
    };
    
    // Write the response body
    response.write(JSON.stringify(obj));
    // End of the response
    response.end();
}

// Start listening at port 1337 or the port number specified in process env port
server.listen(port);
console.log("Server is listening at port " + port);

As you might expect from your experience with Visual Studio, after you declare a variable, you can take advantage of IntelliSense to check the available methods and properties. For example, after you declare the http variable on line 2, you can check the methods available for http by typing the dot (.) after http in the following line (see Figure 1):

Figure 1: IntelliSense provides information about the available methods.

You will see the createServer function in the displayed list. When you select createServer, the IDE displays the documentation for the function. After you press Enter to auto-complete the http.createServer method and you open parenthesis to specify the arguments, the IDE displays the argument names list, in this case, requestListener.

The code in Listing One uses the HTTP and URL libraries to create a very simple Node.js REST API that is capable of processing an HTTP GET status method with some parameters. The server listens on port 1337 or the port specified in process.env.port. When the server receives an HTTP GET for the status method, it executes the status function. This function checks whether a position parameter value has been specified. The following are the four accepted values for position: front, back, left and right. The code converts the specified position value to a camera id (cameraToQuery) and generates values to simulate status data provided by cameras that detect and count faces in real-time. Then, the code sends the JSON response with values for the following keys: cameraId, globalStatus, lensStatus, environmentScore, and detectedFacesCount.

There are simpler ways to achieve the same goal by using other Node.js libraries, such as Express. However, I want to keep the sample code simple to allow you to understand the different features included in Node.js Tools for Visual Studio.

Select View | Other Windows | Node.js Interactive Window and the IDE will display the Node.js REPL (short for Read-Eval-Print Loop), which allows you to test code snippets. The interactive window supports IntelliSense.