How to respond static files with Express.js

Learn how to leverage Express.js to work efficiently with static files and enhance security. This guide covers everything from setting up middleware to using virtual path prefixes to static files in Express.js. I will explain in detail the steps for handling .

Introduction #

Express.js doesn’t allow static files to be returned as responses by default. In order to handle static files such as images and videos, you need to configure middleware and allow access to static files. In this post, we’ll take a closer look at routing static files and using virtual path prefixes.

Here, we will explain the routing method using the following versions.

Express v4.18.1
nodejs v19.7.0

In addition, all the code created this time is posted on GitHub.

Static file routing #

The minimal code to serve static files is below.

static.js

var express = require("express");
var app = express();
app.use(express.static("public"));

app.listen(3000, () => console.log("listening on http://localhost:3000"));

Commentary #

• Importing Express modules

var express = require("express");
var app = express();

The above code loads the module named express and creates a new Express application.

• Static file hosting

app.use(express.static("public"));

The code above uses the express.static function to host static files in a directory named “public”. This allows files in this directory to be accessed directly with URLs that use the file name as the path.

• Start server

app.listen(3000, () => console.log("listening on http://localhost:3000"));

This code will start the server on port 3000. If the server starts successfully, you should see the message ’listening on http://localhost:3000’ on the console.

/public/static.txt

hello world

And set up the directory structure as follows:

/root
|-- static.js
|-- public
    |-- static.txt

With the above settings, you can access static files placed in the public folder.

curl http://localhost:3000/public/static.txt

Using virtual path prefix #

Exposing your project’s directory structure as-is can pose a security problem. To solve that problem, using a virtual path prefix is ​​recommended.

A virtual path prefix is ​​the ability to set a path that does not exist in the actual file system path and map it to a specific directory.

virtual.js

var express = require("express");
var app = express();
app.use(express.static("public"));
app.use("/virtual", express.static("virtual"));

app.listen(3000, () => console.log("listening on http://localhost:3000"));

Commentary #

• Importing Express modules

var express = require("express");
var app = express();

The above code imports a module named express and creates a new Express application.

• Static file hosting

app.use(express.static("public"));

This code uses the express.static function to host static files in a directory named “public”. This allows files in this directory to be accessed directly with a URL that uses the file name as the path.

• Static file hosting with virtual path prefix

app.use("/virtual", express.static("virtual"));

The code above will host static files in a directory named “virtual” and add a virtual path prefix of “/virtual” to them. This allows files in this directory to be accessed via URLs prefixed with “/virtual/”.

• Start server

app.listen(3000, () => console.log("listening on http://localhost:3000"));

This code will start the server on port 3000. If the server starts successfully, you should see the message ’listening on http://localhost:3000’ on the console.

static.txt

hello world

And set up the directory structure as follows:

/root |– virtual.js |– public |– static.txt

test #

curl http://localhost:3000/virtual/static.txt

summary #

This article explained how to use Express.js to work with static files. First, you learned how to set up middleware to allow access to static files, then how to route static files, and finally how to use virtual path prefixes for added security. Armed with this knowledge, web application development with Express.js will become easier.