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
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| // Require the HTTP libraryvar http = require("http");// Require the URL libraryvar 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 portserver.listen(port);console.log("Server is listening at port " + port); |
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.Debugging the Application with the Local Debugger
Right-click on the project name within Solution Explorer and the IDE will display the General properties for the project where you can configure the Node.exe path, arguments, and the debugger port, among other properties. In this case, it isn't necessary to start a Web browser when the app is launched, and so, you can uncheck theStart web browser on launch checkbox.You can set the desired breakpoints in the server.js file and launch the Web application. By default, the tools use node's local V8-based debugger. The debugging experience and the UI is exactly the same that you already know from working with other supported Visual Studio programming languages. Visual Studio connects to the node V8 debugger over a socket, and so you can also debug Node.js remotely running on another Windows computer or a different platform supported by Node.js.
For example, set a breakpoint at the first line of the status function:
var cameraToQuery = 0;Then, start debugging the Web app. A node.exe window will appear and this window will display the Node.js console output. The window will display the following two lines (the port number might be different in case you have a configured value for
process.env.port):debugger listening on port 5858
Server is listening at port 1337You can use a Web browser, Telerik Fiddler, or the curl utility to compose and send a
GET request to localhost and the port in which the server is listening (1337 or process.env.port), adding /status and one of the possible values for the position parameter. For example, you can enter http://localhost:1337/status?position=left in your Web browser or run the following curl command:curl -X GET 'http://localhost:1337/status?position=left'Visual Studio will hit the breakpoint at the first line of the
status
function. You can use the Autos, Locals, and Call Stack windows (see
Figure 2). You can also inspect variables and hover over either selected
expressions or valid identifiers to display a popup with the results of
their evaluation.
Figure 2: Using the Locals and Call Stack windows when debugging the Node.js Web app in Visual Studio.
This way, you can easily check that the
query argument has a position property with a value equal to left. You can step over each line of code and use the Immediate Window to quickly evaluate expressions.Once you finish executing the code in the
status function, you will see the following JSON response in the Web browser or as a result of the curl command:{"cameraId":3,"globalStatus":"OK","lensStatus":"OK","environmentScore":3,"detectedFacesCount":200}Remember that the node.exe window displays the messages sent with
console.log, consequently, you will see a new line in this window:Requesting status information for camera #: 3In this case, I'm using a conventional breakpoint. You can also take advantage of the advanced breakpoints. Go to the Breakpoints window and right click on a breakpoint to see all the available options. For example, the
Hit Count… option allows you to make the breakpoint hit when the location is reached and a specific hit count condition is satisfied.You can also configure how Break on exceptions should work. You just need to select
Debug | Exceptions, expand Node.js Exceptions and check all the Thrown checkboxes for the different kinds of exceptions that you would like to make the debugger break when they are thrown.You realize that
back isn't the appropriate position name for camera number 2, and therefore, you want to change it from back to rear. Enter http://localhost:1337/status?position=rear in your Web browser or run the following curl command:curl -X GET 'http://localhost:1337/status?position=rear'The IDE will hit the previously set breakpoint again within the
status function. Luckily, the IDE supports edit and continue. Thus, you can replace the value in the case statement from case 'back' to case 'rear', save the changes and continue executing the code. Once you finish executing the code in the status function, you will see the following JSON response in the Web browser or as a result of the curl command:{"cameraId":2,"globalStatus":"OK","lensStatus":"OK","environmentScore":3,"detectedFacesCount":150}Installing npm Packages with the Integrated NPM UI
The previous example was a very simple Node.js REST API that uses two standard libraries. However, in your real-life Node.js projects, you will want to install additional npm packages and use them. You can run npm from the Node.js Interactive Window (.npm) or the command line. Visual Studio watches the file system and will update the project with the additions.However, the tools include an integrated NPM UI that enables you to easily search and install npm packages without running commands. In case you are running the project, stop its execution. Right-click on
npm
within the Solution Explorer and select Install new NPM packages…. A
dialog box allows you to search for the available npm packages.You just need to enter some text from the package name and the list will be updated with the package names and descriptions that match this text. For example, enter
express and the dialog box will display all the packages that include express in either the name or the description. Select express 4.10.2
and notice that the right-hand side of the dialog box displays
additional information about the selected package (see Figure 3),
including its homepage. Then, click on Install Package. By default, the
options make NPM install the latest version of the selected package with
a standard dependency and automatically add it to package.json.
Figure 3: Installing a new NPM package with the integrated NPM UI.
If you have experience working with Node.js, it is difficult to avoid working with
npm
in the command line. However, the UI might be helpful to easily search
for packages and check whether newer versions are available.Node.js Tools for Visual Studio transforms Visual Studio into a very good Windows IDE for Node.js projects. If you work with other programming languages and are happy and productive using Visual Studio, you will want to install this add-in to code Node.js projects there as well.
Great Article
ReplyDeleteNode.js Project Topics for Computer Science
FInal Year Project Centers in Chennai
JavaScript Training in Chennai
JavaScript Training in Chennai