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
- 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...
- Using Visual Studio Code, Node.js and gulp.js to create a web application - Serving content - Using gulp-server-io to serve project content - This Part
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:
/node_modules
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
- Add gulp-server-io to the project
- Put together a gulp script that triggers the web server in gulp-server-io
- 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:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello, from the app being served by gulp-server-io</h1>
</body>
</html>
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 readme.md over at GitHub for the project:
const gulp = require('gulp');
const gulpServerIo = require('gulp-server-io');
gulp.task('serve', () => {
return gulp.src('./app')
.pipe(function()
{
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:
A web browser should've popped up with the content in index.html loaded:
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!