serve-static vs express vs koa-static
Node.js Middleware and Static File Serving Comparison
1 Year
serve-staticexpresskoa-staticSimilar Packages:
What's Node.js Middleware and Static File Serving?

These packages are essential tools in the Node.js ecosystem for handling HTTP requests and serving static files. Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. Koa-static and Serve-static are middleware for serving static files in Koa and Express applications, respectively. They help in efficiently delivering static assets like images, CSS, and JavaScript files to clients, enhancing the performance and user experience of web applications.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
serve-static37,900,0081,40525.4 kB186 months agoMIT
express37,028,85466,408221 kB1803 months agoMIT
koa-static850,2601,142-87 years agoMIT
Feature Comparison: serve-static vs express vs koa-static

Framework Compatibility

  • serve-static:

    Serve-static is built into Express, making it easy to use alongside other Express middleware. It is designed for serving static files efficiently and can be easily configured to work with various Express features.

  • express:

    Express is a full-fledged web framework that can handle routing, middleware, and more, making it suitable for building complex applications. It is highly compatible with a variety of middleware, allowing for extensive customization and functionality.

  • koa-static:

    Koa-static is specifically designed to work with the Koa framework, which uses async/await for cleaner code. It is lightweight and integrates seamlessly with Koa's middleware architecture, making it ideal for modern applications that leverage asynchronous programming.

Performance

  • serve-static:

    Serve-static is optimized for serving static files and includes built-in support for caching and setting response headers. It can handle a high volume of requests and is efficient in delivering static content.

  • express:

    Express is optimized for performance and can handle a large number of simultaneous connections. However, the performance can vary based on the middleware used and how the application is structured. Proper use of caching and compression can significantly enhance performance.

  • koa-static:

    Koa-static is designed for performance, leveraging Koa's lightweight architecture to serve static files efficiently. It supports features like caching and conditional requests, which can improve load times for static assets.

Ease of Use

  • serve-static:

    Serve-static is easy to implement within an Express application. It requires minimal setup and provides a simple way to serve static files with various configuration options.

  • express:

    Express is known for its simplicity and ease of use, allowing developers to quickly set up routes and middleware. It has a large community and extensive documentation, making it accessible for beginners and experienced developers alike.

  • koa-static:

    Koa-static is straightforward to use, especially for those familiar with Koa. Its API is simple, and it integrates well with Koa's middleware system, making it easy to serve static files without much configuration.

Customization

  • serve-static:

    Serve-static provides options for customization, such as setting cache control headers and configuring the maximum age for caching. This allows developers to fine-tune how static files are served based on their application's requirements.

  • express:

    Express offers a high level of customization through middleware, allowing developers to add functionality as needed. This flexibility makes it suitable for a wide range of applications, from simple to complex.

  • koa-static:

    Koa-static allows for customization in how static files are served, including options for caching and setting headers. This flexibility is beneficial for developers looking to optimize static file delivery in their Koa applications.

Community and Ecosystem

  • serve-static:

    Serve-static is part of the Express ecosystem, which is well-established and widely used. This means that developers can rely on a wealth of resources and community support when using serve-static.

  • express:

    Express has a large and active community, with a vast ecosystem of middleware and plugins available. This support makes it easier to find solutions and resources for various development challenges.

  • koa-static:

    Koa-static benefits from the growing Koa community, which is known for its focus on modern JavaScript practices. While smaller than Express, the Koa ecosystem is expanding with new middleware and tools.

How to Choose: serve-static vs express vs koa-static
  • serve-static:

    Choose Serve-static if you are working with Express and require a straightforward middleware for serving static files. It is built into Express and offers a simple API for serving files with a variety of options for caching, setting headers, and more.

  • express:

    Choose Express if you need a full-featured web application framework that provides a wide range of functionalities, including routing, middleware support, and a large ecosystem of plugins. It is ideal for building RESTful APIs and web applications quickly and efficiently.

  • koa-static:

    Choose Koa-static if you are using Koa as your web framework and need a simple way to serve static files. It is designed to work seamlessly with Koa's async/await syntax, making it a great choice for modern JavaScript applications that prioritize clean and concise code.

README for serve-static

serve-static

NPM Version NPM Downloads Linux Build Windows Build Test Coverage

Install

This is a Node.js module available through the npm registry. Installation is done using the npm install command:

$ npm install serve-static

API

var serveStatic = require('serve-static')

serveStatic(root, options)

Create a new middleware function to serve files from within a given root directory. The file to serve will be determined by combining req.url with the provided root directory. When a file is not found, instead of sending a 404 response, this module will instead call next() to move on to the next middleware, allowing for stacking and fall-backs.

Options

acceptRanges

Enable or disable accepting ranged requests, defaults to true. Disabling this will not send Accept-Ranges and ignore the contents of the Range request header.

cacheControl

Enable or disable setting Cache-Control response header, defaults to true. Disabling this will ignore the immutable and maxAge options.

dotfiles

Set how "dotfiles" are treated when encountered. A dotfile is a file or directory that begins with a dot ("."). Note this check is done on the path itself without checking if the path actually exists on the disk. If root is specified, only the dotfiles above the root are checked (i.e. the root itself can be within a dotfile when set to "deny").

  • 'allow' No special treatment for dotfiles.
  • 'deny' Deny a request for a dotfile and 403/next().
  • 'ignore' Pretend like the dotfile does not exist and 404/next().

The default value is similar to 'ignore', with the exception that this default will not ignore the files within a directory that begins with a dot.

etag

Enable or disable etag generation, defaults to true.

extensions

Set file extension fallbacks. When set, if a file is not found, the given extensions will be added to the file name and search for. The first that exists will be served. Example: ['html', 'htm'].

The default value is false.

fallthrough

Set the middleware to have client errors fall-through as just unhandled requests, otherwise forward a client error. The difference is that client errors like a bad request or a request to a non-existent file will cause this middleware to simply next() to your next middleware when this value is true. When this value is false, these errors (even 404s), will invoke next(err).

Typically true is desired such that multiple physical directories can be mapped to the same web address or for routes to fill in non-existent files.

The value false can be used if this middleware is mounted at a path that is designed to be strictly a single file system directory, which allows for short-circuiting 404s for less overhead. This middleware will also reply to all methods.

The default value is true.

immutable

Enable or disable the immutable directive in the Cache-Control response header, defaults to false. If set to true, the maxAge option should also be specified to enable caching. The immutable directive will prevent supported clients from making conditional requests during the life of the maxAge option to check if the file has changed.

index

By default this module will send "index.html" files in response to a request on a directory. To disable this set false or to supply a new index pass a string or an array in preferred order.

lastModified

Enable or disable Last-Modified header, defaults to true. Uses the file system's last modified value.

maxAge

Provide a max-age in milliseconds for http caching, defaults to 0. This can also be a string accepted by the ms module.

redirect

Redirect to trailing "/" when the pathname is a dir. Defaults to true.

setHeaders

Function to set custom headers on response. Alterations to the headers need to occur synchronously. The function is called as fn(res, path, stat), where the arguments are:

  • res the response object
  • path the file path that is being sent
  • stat the stat object of the file that is being sent

Examples

Serve files with vanilla node.js http server

var finalhandler = require('finalhandler')
var http = require('http')
var serveStatic = require('serve-static')

// Serve up public/ftp folder
var serve = serveStatic('public/ftp', { index: ['index.html', 'index.htm'] })

// Create server
var server = http.createServer(function onRequest (req, res) {
  serve(req, res, finalhandler(req, res))
})

// Listen
server.listen(3000)

Serve all files as downloads

var contentDisposition = require('content-disposition')
var finalhandler = require('finalhandler')
var http = require('http')
var serveStatic = require('serve-static')

// Serve up public/ftp folder
var serve = serveStatic('public/ftp', {
  index: false,
  setHeaders: setHeaders
})

// Set header to force download
function setHeaders (res, path) {
  res.setHeader('Content-Disposition', contentDisposition(path))
}

// Create server
var server = http.createServer(function onRequest (req, res) {
  serve(req, res, finalhandler(req, res))
})

// Listen
server.listen(3000)

Serving using express

Simple

This is a simple example of using Express.

var express = require('express')
var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic('public/ftp', { index: ['default.html', 'default.htm'] }))
app.listen(3000)

Multiple roots

This example shows a simple way to search through multiple directories. Files are searched for in public-optimized/ first, then public/ second as a fallback.

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic(path.join(__dirname, 'public-optimized')))
app.use(serveStatic(path.join(__dirname, 'public')))
app.listen(3000)

Different settings for paths

This example shows how to set a different max age depending on the served file type. In this example, HTML files are not cached, while everything else is for 1 day.

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic(path.join(__dirname, 'public'), {
  maxAge: '1d',
  setHeaders: setCustomCacheControl
}))

app.listen(3000)

function setCustomCacheControl (res, path) {
  if (serveStatic.mime.lookup(path) === 'text/html') {
    // Custom Cache-Control for HTML files
    res.setHeader('Cache-Control', 'public, max-age=0')
  }
}

License

MIT