Serving Static Assets with Express.js: A Step‑by‑Step Guide

Desired outcome

Configure an Express.js application so that requests for CSS, JavaScript, images, or HTML files are served directly from a filesystem directory without writing custom route handlers.

Prerequisites

• Node.js version 14 or newer installed.
• npm available to install packages.
• An existing Node.js project (or a new one created with npm init -y).
• The Express package installed: npm i express.
• A directory that holds the static files you want to expose, e.g., public/ containing style.css, app.js, and an index.html file.

Focused procedure

1. Create the Express app

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

2. Mount the static middleware

   Use express.static to map the public/ folder to the root URL. Adjust caching and ETag behavior as needed.

   // Serve files from ./public, cache for 1 day, disable ETag generation
   app.use(express.static('public', {
     maxAge: '1d',   // controls the Cache‑Control header
     etag: false     // omit ETag to reduce header size
   }));

3. Start the server

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

Expected checks

• HTTP status and content – Run curl -I http://localhost:3000/style.css. You should see a 200 OK status, a Content-Type: text/css header, and a Cache-Control: public, max-age=86400 header (reflecting the maxAge option).
• Missing file – Request a non‑existent path, e.g., curl -I http://localhost:3000/does-not-exist.txt. Expect a 404 Not Found response because the middleware passes control to the next handler.
• Directory listing – Access http://localhost:3000/ without an index.html inside public/. The response should be 404 Not Found (directory listings are disabled by default).
• Browser verification – Open http://localhost:3000/index.html in a browser. Confirm the page loads and that the Network tab shows 200 for all referenced assets.
• Automated test (optional) – Using supertest:

  const request = require('supertest');
  request(app)
    .get('/script.js')
    .expect(200)
    .expect('Content-Type', /javascript/)
    .end((err, res) => { if (err) throw err; });
  

Recovery options

• Custom 404 handler – Place a middleware after express.static to provide a friendly error page or JSON response.

  app.use((req, res) => {
    res.status(404).send('Sorry, we cannot find that!');
  });
  

• Earlier error triggering – If you prefer static middleware to throw an error instead of falling through, set fallthrough: false. This will cause a missing file to invoke Express’s error‑handling chain.

  app.use(express.static('public', { fallthrough: false }));
  app.use((err, req, res, next) => {
    if (err.status === 404) {
      res.status(404).send('Asset not found');
    } else {
      next(err);
    }
  });
  

Additional considerations

• Security – Ensure the static folder contains only public assets. Do not point express.static at a directory that holds source code, configuration files, or environment variables.
• Performance – For high‑traffic sites, consider offloading static serving to a reverse proxy (e.g., NGINX) or a CDN, which can handle large files and concurrent requests more efficiently than Node.js’s event loop.
• Cache control – Adjust maxAge per file type if needed, using express.static options or a middleware like connect-cache-control to fine‑tune headers.