Friday, 4 May, 2018 UTC
Summary
Express is a web application framework for Node.js that allows you to spin up robust APIs and web servers in a much easier and cleaner way. It is a lightweight package that does not obscure the core Node.js features. In this post we’ll go over how to setup a very basic web server.
Installation Express is very simple to install. Simply install it via
npm as you would with any other package.$ npm install express --save Now that Express is installed, here’s what the most basic server looks like:
const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('An alligator approaches!'); }); app.listen(3000, () => console.log('Gator app listening on port 3000!')); Now, run this script, and navigate to
localhost:3000 in your browser. You should see the message An alligator approaches! in your browser window!Let’s go over each section of this code to explain how Express works.
Explanation
const express = require('express'); const app = express(); The first line here is grabbing the main Express module from the package you installed. This module is a function, which we then run on the second line to create our
app variable. You can create multiple apps this way, each with their own requests and responses.app.get('/', (req, res) => { res.send('An alligator approaches!'); }); This bite of code is where we tell our Express server how to handle a
GET request to our server. Express includes similar functions for POST, PUT, etc. using app.post(...), app.put(...), etc.These functions take two main parameters. The first is the URL for this function to act upon. In this case, we are targeting
'/', which is the root of our website: in this case, localhost:3000.The second parameter is a function with two arguments:
req, and res. req represents the request that was sent to the server; We can use this object to read data about what the client is requesting to do. res represents the response that we will send back to the client. Here, we are calling a function on res to send back a response: 'An alligator approaches!'.app.listen(3000, () => console.log('Gator app listening on port 3000!')); Finally, once we’ve set up our requests, we must start our server! We are passing
3000 into the listen function, which tells the app which port to listen on. The function passed-in as the second parameter is optional, and runs when the server starts up. This just gives us some feedback in the console to know that our application is running.And there we have it, a basic web server! However, we definitely want to send more than just a single line of text back to the client. Let’s briefly cover what middleware is and how to set this server up as a static file server!
Middleware With Express, we can write and use middleware functions, which have access to ALL http requests coming to the server. These functions can:
- Execute any code.
- Make changes to the request and the response objects.
- End the request-response cycle.
- Call the next middleware function in the stack.
We can write our own middleware functions, or use third-party middleware by importing them the same way we would with any other package. Let’s start by writing our own middleware, then we’ll try using some existing middleware to serve static files.
To define a middleware function, we call
app.use() and pass it a function. Here’s a basic middleware function to print the current time in the console during every request:app.use((req, res, next) => { console.log('Time: ', Date.now()); next(); }); The
next() call tells the middleware to go to the next middleware function, if there is one. This is important to include at the end of our function - otherwise, the request will get stuck on this middleware.We can optionally pass a path to the middleware, which will only handle requests to that route. For example:
app.use('/nest', (req, res, next) => { console.log('Request type: ', req.method); next(); }); By passing
'/nest' as the first argument to app.use(), this function will only run for requests sent to localhost:3000/nest.Now, let’s try using existing middleware to serve static files. Express comes with a built-in middleware function:
express.static. We will also use a third-party middleware function, serve-index, to display an index listing of our files.First, inside the same folder where the express server is located, create a folder called
public and put some files in there (any files will do, perhaps some images of gators).Then, install the package
serve-index:$ npm install serve-index --save Import the
serve-index package at the top of our server file:const serveIndex = require('serve-index'); Now, let’s include the
express.static and serveIndex middlewares and tell them the path to access from and the name of our folder:app.use('/gators', express.static('public')) app.use('/gators', serveIndex('public')) Now, restart your server and navigate to
localhost:3000/gators. You should see a listing of all your files! There we have it, a basic Express server using Node.js. To learn more about Express, they have multiple guides and documentation on their website: expressjs.com