Express: The Middleman

In this second installment of From Stack to App, learn about the E in NERD — Express!

Janel Grant
Dec 10, 2019 · 5 min read

What is Express?

While there are many benefits to using Node to develop web applications, it is unable to handle all web-development tasks. Instead of having to write (and rewrite) the vanilla JavaScript needed to accomplish these tasks, why not just use a web framework developed by the Node.js Foundation — Express!

  1. inserting data (eg. user information, items in your shopping cart, etc.) from our database onto the screen for users to see, and
  2. setting web application settings like where to locate certain files or connecting to servers.

Create a Server

Step 1: Start Express App

We need an entry point to our app. So we’re going to start our Express server by creating a server directory and starting an instance of an Express application.

makedir server // creates a folder called "server" 
cd server // enter the server file
touch app.js // creates entry point file for our application
. code app.js // opens up file to edit

Step 2: Request and Send Index.html file to the Browser

We need to actually see our app, so let’s create a basic layout or HTML file. Make sure you are in your main directory (i.e. you are NOT in the server file).

touch index.html 
code index.html

Step 3: Start the Server

Let’s start our server, so we can see what our app looks like so far in the browser.

Step 4: Install Nodemon

Instead of having to kill and restart the server each time we make a change to our app, lets install nodemon. Now we’ll be able to make changes to our app and restart our server automatically.

npm i --S -D nodemon //installs nodemon as a development dependency
npm run dev //starts server

In short it [Express] is the middleman of your app. Express will handle the communication between your frontend (the user interface or browser) and your backend (database and server).

Middleware

So now we have a basic Express app. However, we’ve yet to tap into all that Express has to offer. One of the advantages of using Express is its ability to handle common web development tasks. Granted, we could write the vanilla JavaScript for these tasks ourselves, but by installing Express middleware, we can add this functionality to our applications in an optimized and efficient way.

Step 5: Logging Middleware

Not all middleware are built into the Express library. We call these third-party middleware. In order to use it, we need to first install their node package, require it in our application, then “use” it in our app. One such middleware is morgan, which logs HTTP requests.

npm install --save morgan //installs morgan node package

Step 6: Parsing Middleware

Express contains built-in middleware that allows us to parse or translate the body (information) that often comes with a request from the browser or client side. We can tell which parser will be needed based on the content type of the body (located in the header of the request). After the middleware parses the body, a new body object containing that parsed data is added to the request object. Otherwise, the parser will return an empty object.

Step 7: Static Files and Middleware

So far we’re only showing our index.html file, which gives us a layout for our website with no styling or effects whatsoever. Eventually, we’ll be sending some javascript, css, and other static files from the server. These files will be stored in a folder called “public.”

mkdir public // creates public folder for static files.

Step 8: Error Handling Middleware

The 500 Internal Server Error is a HTTP status code that means something has gone wrong on the web site’s server but we’re not sure why. We’ll add more error handling later when we build Express routes to the database, but for now, lets create this error handling middleware.

Middleware With Nowhere to Go

So now we have an Express application with a server. We can process HTTP requests and responses, serve static files and HTML to the browser, log HTTP requests, handle non-specific errors and listen to our server. Another cool feature of Express, is the ability to create routes to handle requests to and receive responses from our server(s). A route associates an HTTP verb (GET, POST, PUT, DELETE, etc.), an URL path/pattern, and a function that is called to handle that pattern. However, we have no database!

From Stack to App

A how-to guide for building NERD (Node, Express, React, and…