‘Hello World’ with Node.js and Visual Studio Code

As I’ve shared in other posts, I like trying new things. One new thing I’ve been working with over the past couple of weeks is Visual Studio Code (VSC) – a lightweight editor from Microsoft that recognizes and offers IntelliSense for many different file formats. Unlike the commercial or even community editions of Visual Studio, VSC is not solution- or project-based. Instead, VSC is based on directory structures.

For those of you interested in building native JavaScript applications using Node.js, I wanted to provide a demo in how to accomplish this using Visual Studio Code. While full versions of Visual Studio do support Node.js applications, it can sometimes be overkill, especially if you’re not needing pre-compiled libraries based on the .NET Framework (VSC does support referencing external libraries and compilation with MSBuild, but then we get into the discussion of should we use VSC vs. Visual Studio, which is not the point of this blog post). Again, the demonstration below is to assist you as you look to build native JavaScript applications.

Prerequisites

In order to accomplish this tutorial, there are two requirements.  I’m sure they go without saying, but because I’m nice, I’ll provide the download links for you.

NOTE: Visual Studio Code is platform agnostic, but this tutorial is specifically for Windows.  Based on the steps provided, I’m sure you can easily adapt this tutorial to the other platforms.

1. Visual Studio Code (click “Download code for Windows”)
2. Node.js (click “Install”)

Both of these installs with update your environment PATH variable to allow you to run either (or both) from any directory.

Create Working Folder

As stated above, VSC is directory structure-based.  For my tutorial, I’m going to create the folder C:\Projects\HelloWorld.

From Windows Explorer, once you’ve created the folder, right-click on it and you will see the following context menu.  Click on “Open with Code”.

From a DOS/Command Prompt, change directory (cd) to C:\Projects\HellowWorld and type: code .
(NOTE: That’s code “period” to tell VSC to open in the current directory.)

Node.js Dependencies

Node.js is a JavaScript runtime library.  In simplest form, it doesn’t do anything by itself.  Node.js requires various JavaScript libraries for handling and performing tasks like listening for network connections.  (Again a very simplified explanation…) These libraries help to interpret and execute various aspects of our application.  In comparison, Node.js is very similar to IIS.  However, IIS requires handlers (i.e. ISAPI, MVCHandler, etc.) to interpret and serve requests.  Likewise, Node.js requires “handlers,” or, these additional libraries.

There are three that we are going to install:

• Express – the web server implementation that handles requests
• Body-Parser – provides helper libraries for parsing html files
• jQuery – duh. The jQuery libraries

To install these libraries, go to the administrator command prompt and, inside of the HelloWorld directory, type in the following:

This will install the Express server.  Issue the command two more times, but replacing “express” each time with the remaining two definitions (i.e. body-parser & jquery).  You will see that, each time, some files are downloaded and added to your project’s folder.

TypeScript

Visual Studio Code uses TypeScript for it’s JavaScript IntelliSense.  TypeScript supports many different JavaScript libraries.  A list of available type definitions can be seen here. Of course, we don’t necessarily need the TypeScript definitions in order to write Node.js applications (or any applications for that matter), but it sure does make our job a lot easier.

You will need to go to your command prompt, to install the TypeScript Definition Manager.

Option 1: Install TypeScript Definition Manager Globally

At any administrator command prompt type the following:

Option 2: Install TypeScript Definition Manager for HelloWorld Only

At the command prompt, inside of the HelloWorld directory, type in the following:

As you can see, unlike the global installation above, there’s no -g option flag.

For this tutorial, I will install the TypeScript Definition Manager for HelloWorld only so that you can see the files being added.  However, note that the files being added to the project’s directory would have been added globally if you chose to install the TypeScript Definition Manager globally.

NOTE: When you run the command, you may get a warning message about versioning.  Ignore it.  It’s basically saying that your Node.js installation is newer than what it was expecting.

When I add/install the TypeScript Definition Manager for the project, a subdirectory named .bin is created inside of the node_modules subdirectory.  This is where our TypeScript Definition Manager executable (tsd.exe) is located (the BASH shell script is also located here for those of you following along on the UNIX/Linux platform).

Once you’ve completed these steps, your HelloWorld VSC window should look like the following: