How to build node.js apps effortlessly with express.js

Node.js is a pretty powerful and versatile framework to build sites and tools. But using the defaults to handle HTTP requests and such can be a pain. Express.js can make your life a lot easier.

In the previous tutorial I showed you how to get started with node.js, this time I’m going to expand on that. We’re going to scaffold a new Express.js app.  Express.js is a web framework that makes it very easy to handle calls to the node.js server. It helps you with routing, error handling and it works very well other frameworks.

Installing the express generator

The easiest way to get going with any Express.js-based node.js app is by using the express-generator. I’ve you are planning to use it multiple times (and trust me, you will), run the following command and install the express-generator globally.

This might take a moment, but if it’s done installing you should be able to run the ‘express’ command with the ‘-h’ flag to display the help.

Options are limited, but that’s fine. You can select a one of a few common view engines and stylesheet engines. Personally I prefer pug and sass. I plan on doing an entire tutorial on pug soon.

Run the following command to bootstrap the new app.

Next, to install the necessary dependencies, run ‘npm install’.

…and wait…

When it’s eventually done, run ‘npm start’ to start your new application and go to the browser at http://localhost:3000 to view your node.js app running.

This was the easy part… now lets go into a bit more detail on what this has generated.

The App

Left you can see a partial screenshot of the app opened in Visual Studio Code. Let’s go over the folders and let me briefly explain what these contain. In a later tutorial we’ll dive deeper in much of the concepts.

At the top you find a ./bin folder. In there is a ‘www’. This file actually contains the JavaScript needed too start your server. It handles the port at which the server is running. And it literally creates a server for your app.

Which brings to the next important file. Near the bottom of the list you can find ‘app.js‘. In here the express.js app is instantiated and the root level routing is configured. This means that there is some the app is told at what url specific could should be called to handle the requests. It also configures the apps view engine (pug) and the css engine (sass).

Inside the ./views folder there are 3 .pug files. These files are used by the pug view engine and contain the markup of the app.

Then there are the 2 .js files in the ./routes folders. These two handle the requests on the root level routing configured in app.js. What happens is that a request comes at the server, say an HTTP GET request at url http://localhost:3000/users. The url /users is configured in app.js and points to the users.js file in ./routes. Inside users.js the request is taken from there, so the HTTP GET is handled from ‘/’ and a string is placed in the response.

Last, there’s the public folder. This folders is configured in app.js as the location from which static files are served. In fact, this folder is mapped to the root url. So http://localhost:3000/stylesheets/style.css returns the css file, note that there’s no ‘public’ part in that url.

When using Gulp or Grunt to compile your JavaScript and Sass, the resulting files are placed in the public folder.




Leave a Reply

Seo wordpress plugin by
%d bloggers like this: