Serve a public asset directory
Expose frontend assets such as HTML, CSS, JavaScript, and images from a public directory.
Express.js · Function
static
express.static serves static assets from a root directory through Express middleware. An optional options object controls file lookup, caching, dotfiles, ETags, and response headers.
How it works
express.static creates built-in middleware that maps request URLs to files below a chosen root directory. Mount it directly for ordinary paths or under a route prefix for a virtual URL path; optional settings control file lookup, caching, dotfiles, headers, and related serving behavior.
Syntax
express.static(root, [options]);Parameters
| Name | Type | Description |
|---|---|---|
root | String | Root directory from which static assets are served. |
options | Object | undefined | Optional settings controlling how files are served, including dotfiles, ETags, extensions, caching, and headers. |
Returns
Middleware function
Key points
- express.static is available as Express-provided middleware rather than requiring a separately installed application middleware package.
- The middleware delegates its underlying static-file behavior to the serve-static implementation.
- The root directory is the source tree from which requested static assets are exposed.
- File selection joins the incoming request URL with the configured root to locate the asset.
- The options object can turn ETag generation on or off.
- The setHeaders option can apply response headers for each served file.
Common mistakes
- A relative root is resolved from the process's launch directory, not automatically from the source file's directory; use an absolute path when that distinction matters.
- The middleware's ETag behavior is weak and cannot be treated as strong validation.
- Enabling extension fallbacks can make a request resolve to the first matching extension, so configure the list deliberately.
Example: Serve files under a virtual URL prefix
const express = require('express');
const app = express();
app.use('/static', express.static('public'));
app.listen(3000);Run the app from the project directory, place a file such as public/style.css there, then request /static/style.css.
When to use it
Add a virtual path prefix
Make assets available below a URL prefix such as /static without changing their filesystem location.
Combine multiple asset directories
Search several asset directories in order, giving earlier registrations precedence.
Interview questions
QWhat does express.static do?
It is Express's built-in middleware for serving static assets. It combines the request URL with the configured root directory to determine which file to serve.
Follow-up: How can the same middleware expose files below a different URL prefix? Mount it with app.use('/prefix', express.static(root)); the prefix is virtual and need not exist on disk.
QWhat is the purpose of the root argument?
The root argument identifies the directory containing the assets. The function resolves the requested file by combining req.url with that root.
Follow-up: What is a common way to avoid dependence on the launch directory? Pass an absolute root path, commonly constructed from the application's directory.
QHow do you customize static-file serving?
Pass an options object as the second argument. It can configure behavior such as dotfiles, ETags, extension fallbacks, immutable caching, and custom response headers.
Follow-up: How can multiple asset directories be searched? Register express.static more than once; earlier middleware gets precedence when it serves a matching file.
Related
serve-staticapp.useexpress.Routerexpress