Now that we have some of the generic requirements downloaded and installed, let’s configure our application for Node.js.

Task Runner

Visual Studio Code executes “tasks” for building, deploying, etc.  What we must do is configure our own task runner to run our application with Node.js.

NOTE: This step will specify a configuration file app.js as a command argument; we will create this file in a later step.  In writing this tutorial, I could have started in a few different ways.  Each approach had its pro’s and con’s.  I simply chose to teach you from a configuration-first approach.  But, in reality, you could create your content and configuration files first, prior to configuring the task runner.

From within VSC, do the following:

  1. Ctrl+P – this will display the VSC command prompt
  2. Type a Greater-Than sign (i.e. >).  The Greater-Than sign tells VSC that you want to execute an action
  3. After typing the Greater-Than sign, start typing Configure Task Runner.  You should then see two choices.  Choose Tasks: Configure Task Runner
    helloworld-configure-task-runner
  4. Upon choosing this option, a .settings folder is created with a file named tasks.json.  The tasks.json file is a JSON configuration file.  It will have a bunch of different examples in it.
  5. Delete everything in this file (or comment out everything) and add the following:

Save this file (Ctrl+S).  You’ve now created a task that runs Node.js with app.js as a parameter.

Type Definitions

Finally, before we begin typing code, we want to add a couple of type definitions for TypeScript.  This step is optional, but as stated above, it sure does help us a lot with IntelliSense in JavaScript.

Open a command prompt and go to your C:\Projects\HelloWorld folder.

Again, we are going to want to install type definitions for:

  • Express
  • Body-Parser
  • jQuery

Keep in mind, that all we are doing is providing some definitions for objects (classes, functions/methods, variables, etc.) defined in JavaScript libraries.  As stated a couple of times already, these aren’t required, but give us IntelliSense when working with the objects.  The bare minimum definitions that we would want to use for Node.js projects is Express (the web server and core definitions for Node.js).  Body-Parser provides definitions for Node.js’s methods that interpret web pages.  jQuery, of course, gives us IntelliSense for jQuery methods and objects.

While at the command prompt (in your project folder), type the following:

This command will install the type definitions for Express.  Issue the command two more times, but replacing “express” each time with the remaining two definitions (i.e. body-parser & jquery).  Also, Body-Parser has a dependency on Express, so if you don’t add the type definitions for Express first, adding the Body-Parser will also add the definitions for Express.

After adding the type definitions, your project folder will have a typings subfolder containing subfolders that correspond to the definitions we downloaded.  Feel free to take a look at them if you’d like.

An updated screenshot is below.

helloworld-tasks-and-typings

Setting up the environment is now complete.  In all (provided that VSC and Node.js were already installed), this should probably take you 5 minutes to complete for future projects.

Like What You See?

Subscribe to receive new posts in your inbox.