Node Js - Serve static Assets to the client using Express

Node Js - Serve static Assets to the client using Express


Using Express we can send static files (Html, CSS, JS files, images, etc) to the client from the Node server.

To serve static files, use the express.static built-in middleware function in Express.

middleware function is a function that has access to request, response object, and the next() function. Middleware function can be an inbuilt function in Express or you can also create such functions.

express.static is an inbuilt middleware function in the Express framework.

This is how function looks,

express.static(root, [options])

root -> specifies the root directory from where the Express will serve the static files.
options are the optional parameter.

For example, you want to serve the files from the public directory. 

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

Note. Express provides us a method i.e app.use(), to load middleware functions in your js file.

We will serve files in the public folder.

Code for your reference:

const express = require('express')

const app = express()

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

app.listen(8000, ()=>{
    console.log('server is up and running at 8000 port')
})

Now, In the browser

For Images,

you can open the "localhost:8000/Images/node.png". As you can see we are able to serve Html pages, images. In the same way, you can serve various files to the client.

Please Note, The path that you provide to the express.static middleware function is relative to the directory from where you launch your node project but if you run the express app from another directory, it's better to use the absolute path of the directory that you want to serve to the client.

Load the assets from the Absolute path

express.static function only searches the files in the relative path of your node project directory, but to load files from another directory we should use absolute path. 

   

__dirname gives you the current directory you are working in.

The path.join() method joins the comma-separated path segments into one path. You can specify as many paths you want to join. The path segments must be strings and separated by a comma.

Code for your reference:

const express = require('express')

const path = require('path')

const app = express()

const publicAbsolutePath =  path.join( __dirname, './public')

app.use(express.static(publicAbsolutePath))

app.listen(8000, ()=>{
    console.log('server is up and running at 8000 port')
})