Adventures in Express Part 2: Static File Websites

This is a continuation from Adventures in Express Part 1. In this post, I'll go over setting up a simple express server to serve up a static file website. This works great if you want to host a blog or website that does not require many changes or is generated via a static site generator.

The source for this walk-through is available on GitHub:

https://github.com/tonyfosterdev/express-pt2-static-files

Creating the Application

Create your application folder and initialize your repository and npm package

 ~$ mkdir express-pt2-static-files
 ~$ cd express-pt2-static-files
 ~/express-pt2-static-files$ git init
 ~/express-pt2-static-files$ npm init

Install express

 ~/express-pt2-static-files$ npm install --save express

Create index.js in the application's root directory

 ~/express-pt2-static-files$ touch index.js

and add the following code

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

 const app = express();

 app.use('/', express.static(path.join(__dirname, 'public')));

 const port = process.env.PORT || 3000;

 app.listen(port, () => {
   console.log(`Listening at http://localhost:${port}`);
 });

Create the public folder
```
 ~/express-pt2-static-files$ mkdir public
```
and copy in the static website files from the repository.
Run the application
```
 ~/express-pt2-static-files$ npm run start
```
You should see the following output in the console:
```
 Listening at http://localhost:3000
```
and navigating to http://localhost:3000, you should see a lovely website letting you know to wear a mask. The website files are available in the public folder.

What's going on here?

In this simple example, we've created an application, added one dependency, express, and added some code to start our service.

Let's look at the code in index.js again, but this time with my commentary.

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

const app = express();

Here we require the express dependency and create an application object named app. The application object helps us add functionality to the service through its API.

app.use('/', express.static(path.join(__dirname, 'public')));

Here we use the express.static middleware to serve static files. We're passing one argument to the middleware: the path of the folder containing the files we want to serve. In this example, path.join(__dirname, 'public') evaluates to the public folder in the repository.

Because we're using '/' as the middleware path, the files will be available at http://localhost:3000/. If we had used /foo:

app.use('/foo', express.static(path.join(__dirname, 'public')));

the files would be available at http://localhost:3000/foo.

const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});

And finally, this piece of code starts the server and has it listen for requests on the port provided by the PORT environment variable or 3000 if none is provided.

Conclusion

You've now seen how you can quickly host a static site with Express. In the next post, things are going to get a little more advanced as I'll be describing how to perform API first development with OpenAPI and Express.

Credits

Cover photo by B K on Unsplash