Using Visual Studio Code, Node.js and gulp.js to create a web application - Getting started

I've written quite a few posts recently that touch on using Visual Studio Code, Node.js and gulp.js. This is entirely down to having started working on a product that uses all of these, along with AngularJS (1.x). A good way to get a handle on all of the different moving parts is to do something from scratch and see how it all hangs together.

Other parts of this series

Getting started

First up is getting all the required bits and pieces installed, these are:

  • Git - only because I'm using it to keep track of the changes I'm making, it's not an essential component of what I'm doing
  • Visual Studio Code - again this isn't essential, but it certainly makes working with everything a lot easier
  • Node.js (9.8.0 at the time of writing)

Once these are all installed, choosing to install npm package manager as part of the Node.js install, we can finish getting started!

Installing Node.js, making sure to install npm as well

Next up is creating a folder for the code and getting it under source control. I'm doing all of this via the command line as it makes it easy to write up! So, here's the commands to run (I keep all this in D:\Git\ so the paths are relative to that):

PS D:\Git> md PreferenceCenter

    Directory: D:\Git

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       01/03/2018     21:14                PreferenceCenter

PS D:\Git> cd .\PreferenceCenter\
PS D:\Git\PreferenceCenter> git init
Initialized empty Git repository in D:/Git/PreferenceCenter/.git/

Now we've got a folder to work with, it's time to get Visual Studio Code running by typing:

PS D:\Git\PreferenceCenter> code .

into the command line. Et voila, Visual Studio code opens itself and roots itself to the directory just created.

Starting to build out package.json

In order to use node/npm we need to have a package.json file that it can read. This is a file that contains all the details that npm needs so that it can install the packages we're going to use. There's some great detailed documentation that covers the format of package.json available from The quickest way to add the file to the "project" is to keyboard it by typing CTRL-N which will cause Code to create a new file called "Untitled-1", then it's CTRL-S to trigger a "Save As" window, enter the filename and click Save.

Now there's an empty package.json, it's time to populate it with some information. At its simplest, there are a few key values that need to be present:

The start of a package.json file

In text form, that's:

    "name": "preference-center",
    "version": "",
    "private": true

In order to do something "interesting", we need to get npm to pull in gulp.js, this is achieved by adding a bit more to package.json, specifically adding a dev dependency on gulp.js:

    "name": "preference-center",
    "version": "1.0.0",
    "private": true,
    "devDependencies": {
        "gulp": "^4.0.0"

Now we can run "npm install" from the command line, which will output something along the lines of:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 335 packages in 22.77s

Before we can actually run gulp, we need to install the "gulp-cli" package (though I guess it could be included as a 'devDependency'), which I do globally with:

npm install gulp-cli --global

Now we can confirm that gulp is installed by running "gulp -v":

PS D:\Git\PreferenceCenter> gulp -v
[20:46:29] CLI version 2.0.1
[20:46:29] Local version 4.0.0

What's next?

Now that all the required bits are installed and working, we can move on to doing interesting stuff, like a gulp script that starts a web server and spins up a browser pointing at the web server - which I'll cover in a subsequent post.

About Rob

I've been interested in computing since the day my Dad purchased his first business PC (an Amstrad PC 1640 for anyone interested) which introduced me to MS-DOS batch programming and BASIC.

My skillset has matured somewhat since then, which you'll probably see from the posts here. You can read a bit more about me on the about page of the site, or check out some of the other posts on my areas of interest.

No Comments

Add a Comment