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

Once we've got the basics of the project setup, npm is working, gulp is installed and ready to go, next up is actually creating a starting gulp script and adding enough to it go get it to serve up some content

Other parts of this series

Git Bits

Before getting started with actually having a web application that has content being served, adding a .gitignore file that tells Git to skp over the 'node_modules' folder is a good idea. Like the 'packages' folder that contains NuGet packages for a Visual Studio / .net project, persisting this to source control isn't something you really want to do. There's a lot more that can go in the .gitignore file, and it'll likely be a bit bigger by the time I've finished, e.g. I'll probably end up adding entries to exclude any 'compiled' files that are products of running build scripts, along with anything retrieved by any of the packages I use.

That means the .gitignore file is rather sparse, with a single solitary line in it:


So, anything retrieved by npm will now not be looked at Git, keeping the list of candidate files to be comitted that bit smaller.

Using gulp-server-io to serve content

The next thing I want to do is start putting together a gulp script that serves my content so I can see how my web application looks at the push of a button, or the execution of a command. To do this I'm going to use an npm package called 'gulp-server-io' that'll serve the content of my app for me so I can make sure it works. This particular package has an added bonus baked in, it supports "live reload" of the content that's being served, meaning that every time I make a change to the content of the web application, the page in the browser will get automatically refreshed. Fair warning: this is something that you may sometimes want to turn off!

We need three things in order to serve the content

  1. Add gulp-server-io to the project
  2. Put together a gulp script that triggers the web server in gulp-server-io
  3. Have some content to serve!

Adding gulp-server-io to the project is easy, it's just a matter of updating the projects package.json to pull it in, then running npm install to retrieve it:

    "name": "preference-center",
    "version": "1.0.0",
    "private": true,
    "devDependencies": {
        "gulp": "^4.0.0",
        "gulp-server-io": "^1.4.0-beta.1"

Before we create a gulp script, lets get some sample content into the project so that gulp-server-io will have something to serve. For this purpose, create a folder called app and then drop an index.html file into it with a little bit of content, I've used:

        <title>Page Title</title>
        <h1>Hello, from the app being served by gulp-server-io</h1>

This just gives something to actually see when the gulp script spins up gulp-server-io and displays our content in a web browser, what's in there doesn't really matter as long as there's something you can see to confirm that it's all working.

The final piece of the puzzle before we can see some content in a browser is the gulp script. I've based it on the one currently in the over at GitHub for the project:

const gulp = require('gulp');
const gulpServerIo = require('gulp-server-io');

gulp.task('serve', () => {
    return gulp.src('./app')
            return gulpServerIo();

gulp.task('default', gulp.series('serve'));

Returning to the command line and running gulp spins up ther web server and spits out a few informational messages to tell us so:

gulp running and telling us that the gulp-server-io server is running on localhost:8000

A web browser should've popped up with the content in index.html loaded:

Browser showing served content

The last bit to show here is the automatic page refreshing in play. Making a change to index.html and saving the file should cause the page in the browser to refresh to display the updated content and pop a message in the console to say that this has happened:

[16:40:33] [Watcher] File changed
[16:40:33] change D:\Git\PreferenceCenter\app\index.html
Sending message to 1 connection(s): reload
Reload client connected to server

And, that's all there is to it!

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