Helton's Blog

Express

December 29, 2019 ― Updated on January 01, 2020

ExpressJS is a web application framework for NodeJS. It’s minimal and flexible, great for building Web APIs.

Popular services are built on it, like MySpace and Ghost.

It’s also the foundation for other tools and frameworks, like Kraken and Sails.

Installing (via yarn)

yarn add express

Installing (via npm)

npm install express --save

Getting Started

Let’s write our first Expression app.

I will use ES6 features here because it’s cool (and because I want to). To try it by yourself make sure you use Babel or anything that can transpile your code to ES5.

First, the boilerplate: importing stuff:

const express = require('express');
const app = express();

Well, that’s enough to get an app instance. Now let’s define our single route. With that our server will be able to answer http://localhost:<port>

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

The get method provides a callback function, where we can access the request (req) and the response (res) parameters. These parameters inherit from http.IncomingMessage and http.ServerResponse Node classes respectively, so we’re able to access their methods as well. For instance, we can do:

app.get('/', (req, res) => {
    res.write("Hello, it's me again");
    res.end();
});

Is that so? Not quite, we still need to tell it to listen to some port:

app.listen(3000);

What if I want to get some information to know if the server is running? Well, you can attach a callback function when calling listen:

const server = app.listen(3000, () => console.log('Server running at http://localhost:' + server.address().port));

Now our app is ready. Let’s put it to run:

$ node app.js

You should see the following output:

Server running at http://localhost:3000

I didn’t get it. What did we do exactly?

Middleware

Well, we defined a custom middleware. They’re functions executed sequentially that access the request, response and the next middleware, being responsible to handle the response (or pass it to the other middleware). They are stacked into each other.

Inside each middleware we can do things like:

  • Validation
  • Authentication
  • Data Parsing

and so on…

When a request comes in, it passes through each middleware before reaching the routes, like a plumbing pipe.

Calling next() the middleware passes the control to the next middleware available in the stack to handle the request. Don’t ever ever try to call next() after your response is completed (it’ll cause errors, believe me).

Middleware Stack

For a more detailed explanation, take a look at Understanding expressjs middleware with a visual example

I also borrowed the image below from the Express site itself. It helps to explain each middleware piece.

Express Middleware

So, you need a JSON as a result, right? Easy, just send a JavaScript object as a response:

app.get('/blocks-as-json', (req, res) => {
  let blocks = ['Fixed', 'Movable', 'Rotating'];
  res.send(blocks);
});

The send function converts Object and Arrays to JSON.

Did I hear HTML? All right, send function can handle it as well (magic!):

app.get('/blocks-as-html', (req, res) => {
  let blocks = ['Fixed', 'Movable', 'Rotating'];
  let html = '<ul>';
  blocks.forEach(block => html += `<li>${block}</li>`);
  html += '</ul>';
  res.send(html);
});

Of course, this is just an example. If you really need to do server-side rendering go for ESJ, Pug (formerly Jade), Handlebars ou any shiny template engine you like.

Redirecting

To redirect to a relative path, use the redirect method available on response object:

app.get('/i-will-not-be-here-for-a-while', (req, res) => {
  res.redirect('/');
});

By default, it’ll respond with an HTTP 302 status code (Moved Temporarily). To change it (to HTTP 301 [Moved Permanently], for instance), pass it as the first parameter:

app.get('/i-am-definitely-not-here', (req, res) => {
  res.redirect(301, '/');
});

Send files

Suppose that we have an index.html file in a public folder that we want to serve at /home. How can we do it with Express? Piece of cake:

app.get('/home', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

Pay attention to the __dirname. It’s necessary to locate our index.html based on the current path. We could’ve use ./public/index.html instead as well.

Send files with express.static

We can also use the express.static middleware (the only middleware that’s currently shipped with Express) to do the job:

app.use('/home', express.static(__dirname + '/public/index.html'));

What if I have a bunch of files in the public directory? You don’t expect me to reference one-by-one, don’t you? Of course not. Just tell express.static to serves everything under the specified folder:

app.use('/home', express.static('public'));