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

• Using Visual Studio Code, Node.js and gulp.js to create a web application - Getting started - Getting things ready to go, making sure npm and gulp are working... - This Part
• Using Visual Studio Code, Node.js and gulp.js to create a web application - Serving content - Using gulp-server-io to serve project content

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!

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 docs.npmjs.com. 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:

In text form, that's:

{
    "name": "preference-center",
    "version": "1.0.0.0",
    "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.