Express.js Mastery / Express: Let’s Start Building The Natours API!

Serving Static Files

📖 Context

"Static files" are files that already exist in the file system (HTML, images, CSS, JavaScript) but currently cannot be accessed via a browser/URL, since no route has been defined for them. This lecture covers how to make these files accessible using a built-in Express middleware.

💡 Example Problem

A file like overview.html sits inside a public folder, but visiting a URL like /public/overview.html (or similar) doesn't work — because there's no route handler associated with that URL.

🔹 Step 1: Using express.static in app.js file:

app.use(express.static(`${__dirname}/public`));

💡 How each part works:

  • 📁 express.static — a built-in Express middleware specifically designed to serve static files.

  • 📂 It takes one argument: the directory to serve files from — in this case, the public folder.

  • 📍 A template string is used with __dirname to build the correct absolute path, ensuring it works regardless of where the app is run from.

  • ⚙️ app.use(...) — registers this as global middleware, just like any other middleware seen so far.

🔹 Step 2: Accessing the File — And Why the Folder Name Is Dropped from the URL

After adding this middleware, the file can be accessed at:

12.0.0.1:3000/overview.html

❌ Not:

12.0.0.1:3000/public/overview.html

💡 Why the public Folder Disappears from the URL

  • 🔍 When Express receives a request for a URL that doesn't match any defined route, it then checks the folder specified in express.static().

  • 🌐 That folder is effectively treated as the root of the site for static file purposes.

  • 📄 So requesting /overview.html causes Express to look for overview.html inside the public folder — the public part of the path is implicit, not part of the URL.

🖼️ This Also Works for Nested Files

For example, an image inside public/img/:

12.0.0.1:3000/img/pin.png

✅ This correctly serves the image, following the same logic — Express looks inside:

public/img/pin.png

Even though public isn't in the URL.

🔹 Step 3: What Does Not Work

  • ❌ Trying to access a path that isn't an actual static file (i.e., something that looks like a normal route but has no matching file or handler) will not work.

  • 🔍 Express will instead try to match it against defined routes, fail, and return an error, since express.static only kicks in for files that genuinely exist in the specified folder.

🔹 Step 4: Observing the Browser's Network Requests

  • 🌐 When opening overview.html in the browser, the Developer Tools Network tab shows a separate HTTP request for every asset on the page (images, stylesheets, scripts, etc.).

  • 💡 This reinforces a core web concept: each resource referenced by an HTML page triggers its own individual request to the server.

📝 In This Demo

  • ⚠️ Most of these asset requests return 404 Not Found, since overview.html wasn't actually designed to be served this way in this project.

  • 🎯 It was only used to demonstrate the static file serving mechanism, not to build a working webpage.

✅ Key Takeaway

  • 📁 express.static() serves static files from a specified folder.

  • 🌐 The folder acts as the root, so its name isn't included in the URL.

  • 📄 It only serves existing static files—it doesn't create routes.

  • 🚀 While not essential for building APIs, it's a commonly used Express feature.