Serve a public asset directory
Expose browser assets such as HTML, CSS, JavaScript, images, or fonts from a directory.
Express.js · Function
express.static
express.static(root, [options]) returns built-in Express middleware for serving static assets from a directory. Mount it directly or under a URL prefix, and use options to control file lookup, caching, dotfiles, and response headers.
How it works
express.static creates middleware that maps request URLs to files beneath a root directory and serves matching static assets. The optional options object changes behaviors such as dotfile handling, extension fallback, caching, and response headers.
Syntax
express.static(root, [options]);Parameters
| Name | Type | Description |
|---|---|---|
root | String | String path to the directory from which static assets are served. |
options | Object | undefined | Optional object configuring how files are served; documented options include dotfiles, etag, extensions, immutable, maxAge, redirect, setHeaders, and fallthrough. |
Returns
Middleware function that serves static files.
Key points
- It is included with Express, so a separate static-file middleware package is not required for the basic use case.
- The implementation delegates static-file serving behavior to the serve-static module.
- The first argument establishes the filesystem boundary used to locate requested assets.
- A request URL is combined with the configured root to select the file returned by the middleware.
- The extensions option can try configured suffixes when the directly requested file does not exist.
- The setHeaders option lets an application customize headers on responses for static files.
Common mistakes
- A relative root is resolved from the process launch directory, so use an absolute path when the working directory may vary.
- ETag generation is enabled by default and uses weak ETags; account for that when designing cache validation.
- Extension fallbacks can serve a different filename than the URL suggests; configure the list deliberately.
Example: Serve files under a virtual prefix
const express = require('express');
const path = require('path');
const app = express();
app.use('/static', express.static(path.join(__dirname, 'public')));
app.listen(3000);Run the server and request /static/style.css to serve public/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.
Serve from multiple directories
Provide fallback directories so a request can search more than one static asset location.
Set static-file headers
Apply custom response metadata to files as they are served.
Interview questions
QWhat does express.static do?
It is built-in Express middleware for serving static assets. The root identifies the directory, and the middleware combines the request URL with that root to determine the file.
Follow-up: How would you expose the same files beneath a prefix? Mount the middleware with app.use('/prefix', express.static(root)); the mount path provides the virtual URL prefix.
QWhat are the arguments?
The required root is the directory from which assets are served. The optional options object controls file-serving behavior, including dotfiles, ETags, extension fallbacks, and headers.
Follow-up: How can you add a response header for served files? Supply setHeaders in the options object and set the header from its response argument.
QWhat should you consider when configuring the root and multiple directories?
A relative root is interpreted from the directory where the Node process was launched. Multiple static directories can be registered by calling express.static repeatedly.
Follow-up: Which directory wins when several contain the requested file? The middleware registered first gets precedence because it is evaluated first.
Related
app.useserve-staticexpress