AppDividend
Latest Code Tutorials

How To Serve Static Files in Express

144

Get real time updates directly on you device, subscribe now.

In this tutorial, we will see 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. Express provides the thin layer of web application features, without obscuring Node.js features that you know and love. Right now Express Framework’s version is 4.16.0.

How To Serve Static Files in Express

We can serve the static files such as images, CSS, and JavaScript files using the express.static built-in middleware function in Express. The syntax is following.

express.static(root, [options])

The root argument specifies a root directory from which to serve the static assets. The function determines the file to serve by combining the req.url with the provided a root directory. When the file is not found, instead of sending a 404 response, it instead calls next() to move on to a next middleware, allowing for stacking and fall-backs. Now, let us take an example to serve static files in express.

#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

 

How To Serve Static Files in Express

#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. 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.

Now, again restart the node server and 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 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 a express.static middleware function.

To create the virtual path prefix (where the path does not exist in a file system) for files that are 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

Finally, How To Serve Static Files in Express tutorial is over. Thanks for taking.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.