Serve Web Applications and Static Files with Express

• Creating the Server
• Directory Configuration
• Custom Routes
• Configuration for SPA
• Conclusions

Creating the Server

Create a folder for the Express server. Create a file called index.js, open the console, and write:

npm init

Complete the requested options. Then install the Express module using the following command:

npm install --save express

Create a folder within the project where the static files will go. In this case, the folder will be called app. The file tree should look like this:

|-- app
|-- node_modules
|-- index.js
|-- package-lock.json
|-- package.json

Directory Configuration

Place the static files in the /app folder, for example, your website, images, CSS files, etc. To make the Express server use that folder as the source for static files, you would use the express.static() code as follows in index.js:

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

// tell the server to use /app as the source for static files
app.use(express.static('app'));

// run the server on port 3000
app.listen(3000, () => console.log('Running on http://localhost:3000'));

If, for example, there were files named cat.jpeg, main.css, index.html in /app, we could access them from the server with the routes:

http://localhost:3000/cat.jpeg
http://localhost:3000/main.css
http://localhost:3000/index.html

If, for example, there was another folder called static that we also wanted to use as a source for static files, we simply need to call the function again:

// tell the server to use /app and /static as sources for static files
app.use(express.static('app'));
app.use(express.static('static'));

Express will search for files in the order defined by the static directories.

Custom Routes

If we want to create a custom route through which to access static files, we can do so by passing the name as the first parameter of the function as follows:

// tell the server to use /app and /static as sources for static files
app.use('/static', express.static('app'));
app.use('/static', express.static('static'));

We would access the files this way:

http://localhost:3000/static/cat.jpeg
http://localhost:3000/static/main.css
http://localhost:3000/static/index.html

Configuration for SPA

If we have an application developed in frameworks such as Angular, React, or Vue and we want our server to serve these applications and redirect routes to be handled by the web application, we can configure the server as follows:

Assuming our application is in a folder called /app

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

// tell the server to use /app as the source for static files
app.use(express.static('app'));

// redirect all routes to be handled by our application
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/app/index.html'));
});

// run the server on port 3000
app.listen(3000, () => console.log('Running on http://localhost:3000'));

Conclusions

Through express.static(), handling static files becomes much simpler. It also allows us to use an Express server to serve web applications.

If you only need to serve a static website, you may not need a server as such. There are free options for hosting web applications, including Github Pages, Netlify, Firebase Hosting, and Surge.

I hope this article is helpful to you.