Express.js Static Files Serving

Imagine you're building a website with beautiful CSS styles, client-side JavaScript, and images. How do you send these files to the browser? In Express, we use **static file serving** to make these files accessible to clients.

What are Static Files?

Static files are files that don't change dynamically – they're the same for every request. Common static files include:

CSS stylesheets (`style.css`)
Client-side JavaScript (`script.js`)
Images (`logo.png`, `background.jpg`)
Font files and PDFs
HTML files (though we usually generate HTML dynamically)

Think of static files like the ingredients in a restaurant's kitchen – they're always there, ready to be served. Express just needs to know where to find them.

express.static() Middleware

Express provides built-in middleware called `express.static()` to serve static files. You pass it the directory name where your static files are stored.

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

<!-- Serve static files from the 'public' directory -->
app.use(express.static('public'));

app.listen(3000);

Now any file in the `public` folder is accessible via the browser:

public/
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── logo.png
└── index.html

These files become available at:

`http://localhost:3000/css/style.css`
`http://localhost:3000/js/script.js`
`http://localhost:3000/images/logo.png`
`http://localhost:3000/index.html`

Multiple Static Directories

You can serve files from multiple directories. Express will search them in order.

app.use(express.static('public'));
app.use(express.static('uploads'));
app.use(express.static('node_modules/bootstrap/dist'));

Virtual Path Prefix

You can create a virtual path prefix that doesn't actually exist in the file system:

<!-- Now static files are accessible under /static path -->
app.use('/static', express.static('public'));

<!-- File public/css/style.css becomes: -->
<!-- http://localhost:3000/static/css/style.css -->

Practical Example: HTML Page with Static Assets

public/index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <h1>Welcome to My Site</h1>
  <img src="/images/logo.png" alt="Logo">
  <script src="/js/script.js"></script>
</body>
</html>

server.js

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

<!-- Serve static files -->
app.use(express.static(path.join(__dirname, 'public')));

<!-- If you also want to serve files from node_modules -->
app.use('/bootstrap', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));

app.listen(3000);

Important Notes

The path you provide to `express.static()` is relative to where you run the `node` process, not relative to the script file. Use `path.join(__dirname, 'public')` for reliability.
Express doesn't send files that are outside the specified directory – this is a security feature.
If a static file and a route match the same path, the route takes precedence.

Two Minute Drill

Static files are CSS, JS, images, etc., that don't change per request.

Use `express.static()` middleware to serve static files.

Files become accessible at the root URL (e.g., `/css/style.css`).

Use virtual path prefixes like `/static` to organize static files.

Use `path.join(__dirname, 'folder')` for reliable paths.

Take Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

Express.js Static Files Serving

Need more clarification?