Welcome to Part 2 of this review of the Pluralsight course Building Web Applications with Node.js and Express 4.0 by Jonathan Mills.

Jonathan is a JavaScript and Node.js expert working mostly in the MEAN Stack with individuals and companies to help build their technical skills to cope with the constantly changing landscape of software development.

He is also an ASP.NET insider and an international speaker focusing on JavaScript both in the browser and on the server.

In this module we will get Express JS configured, setup, working and running. We’ll do some simple routing, play with Bootstrap Templates and learn about Bower.

Setting up Express JS

Our First App

This demo will be similar to the Hello World example in the official docs.

It begins by importing Express as a module as we saw previously, and creates an instance of express call app, and invoke app.listen.

NPM Start

NPM Start is a standard way for us to run our Node.js code.

Jonathan shows us how to update our package.json with a start script which aliases npm start with our application specific startup command.

Simple Routing

We add:

app.get('/', function (req, res) {
  res.send('Hello World');
});

We go to localhost:5000 and see that our app now prints Hello World in the browser.

Bootstrap Templates

At bootstrapzero there are loads of free templates available. Jonathan likes Storystrap.

We download this and create a public folder that contains our JavaScript and CSS.

Next we want to setup this public directory as a static directory so that Express can serve up every file in there.

Static Files

This is as explained in the official docs on static files

app.use(express.static('public'));

Express will now look for static files in the public directory.

We see that our Hello world hasn’t changed, but we can now navigate to the files inside the public directory e.g.

localhost:5000/css/styles.css

We can setup another static directory for our views:

app.use(express.static('src/views'));

Bower

Bower is a front-end package management system. It has a flat package hierarchy and installs all packages at the same level.

It is very similar to NPM but uses bower.json instead of package.json

In this course we use it to install our front-end packages.

We see a bower_components directory with our packages in it. We want to instead have Bower install those files into our public directory.

We can do this by creating a .bowerrc file and adding the configuration information in a JSON object:

{
“directory”: “public/lib”
}

We update several file paths in our index.html, run it up, and check that everything is correct using Chrome dev tools.

Jonathan says having to type all the file paths out, and needing to restart our server every time we make a change is painful.

We can automate these things with Gulp, and that’s what we’ll learn in the next module.