How to Serve Static Files in Express

Express is the Fast, unopinionated, minimalist web framework for Node.js. We can also build the robust api using HTTP utility methods and middleware at your disposal. 

How to Serve Static Files in Express

To serve static files in express, use the express.static() function. The static files such as images, CSS, and JavaScript files using the express.static built-in middleware function. Express provides the thin layer of web application features without obscuring Node.js features that you know and love.

Syntax

express.static(root, [options])

Arguments

The root argument specifies a root directory to serve the static assets. The function determines the file to serve by combining the req.url with the provided root directory.

When the file is not found, instead of sending a 404 response, it instead calls next() to move on to the next middleware, allowing for stacking and fall-backs. Let us take an example to serve static files in the express.

Step 1: Install Express and create a server

Create a project folder.

mkdir expstatic

Now, initialize the package.json file using the following command.

npm init -y

Install express using the following command.

npm install express --save

Now, create a folder inside the root called public.

Also, create one file inside the root called server.js.

// server.js

const express = require('express');

const app = express();
const PORT = process.env.PORT = 4000;

app.listen(PORT, () => {
  console.log('Server is running at:',PORT);
});

Go to the terminal and start the server.

node server

Step 2: Add Static Middleware

First, we need to define the root directory that can act as a folder, from which we can load the static assets like CSS, JS, and Images.

In our case, it is the public directory. So let us define it.

// server.js

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

So, our server.js file looks like this.

// server.js

const express = require('express');

const app = express();
const PORT = process.env.PORT = 4000;

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

app.listen(PORT, () => {
  console.log('Server is running at:',PORT);
});

Now, our static files folder is loaded. Next, let us add the three files inside the public folder.

We have added three files inside the public folder.

// style.css

body {
  background-color: red
}

// app.js

function add(x)
{
  return x + x;
}
console.log(add(2));

And last one image.

Again, restart the node server, go to the browser, and type the following URLs.

1. http://localhost:4000/style.css
2. http://localhost:4000/app.js
3. http://localhost:4000/Krunal.jpg

You can see the content inside the files in the browser. So, now we are serving the static files in the express.

Multiple Static Assets Directory

We can define the multiple static directories to serve the static files.

For that, we need to define the middleware two times.

app.use(express.static('public'))
app.use(express.static('files'))

In this case, you have two directories 1) public 2) files.

Express looks up the files in the order in which you set a static directory with an express.static middleware function.

To create the virtual path prefix (where the path does not exist in a file system) for files served by the express.static function, specify a mount path for the static directory, as shown below.

app.use('/content', express.static('public'))

So, here we have defined the prefix called /content.

So, when you access the path to the browser, you need to add the prefix like this.

1. http://localhost:4000/content/Krunal.jpg
2. http://localhost:4000/content/style.css
3. http://localhost:4000/content/app.js

That’s it for this tutorial. Thanks for taking it.