Open In App

Express express.static() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The express.static() function is a built-in middleware function in Express. It serves static files and is based on serve-static. 

Syntax:

express.static(root, [options])

Parameters: The root parameter describes the root directory from which to serve static assets. 

Return Value: It returns an Object. 

Steps to create the application:

Step 1: Initialize the express app:

npm init -y

Step 2: Installing the required packages by using below command.

npm install express ejs

Project Structure:

NodeProj

The updated dependencies in package.json file will look like:

"dependencies": {
"ejs": "^3.1.9",
"express": "^4.18.2",
}

 Example 1: Below is the code example of the express.static() Function

Javascript




const express = require('express');
const app = express();
const path = require('path');
const PORT = 3000;
 
// Static Middleware
app.use(express.static(path.join(__dirname, 'public')))
 
app.get('/', function (req, res, next) {
    res.render('home.ejs');
})
 
app.listen(PORT, function (err) {
    if (err) console.log(err);
    console.log("Server listening on PORT", PORT);
});


HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>express.static() Demo</title>
</head>
 
<body>
    <h2>Greetings from GeeksforGeeks</h2>
    <img src="Demo.jpg" width="150" height="100" />
</body>
 
</html>


Note: Demo.jpg is placed in the public folder, as the public folder is now being served as static to the server.

Steps to run the program:

node index.js

Console Output:

Server listening on PORT 3000

Browser Output: Now open your browser and go to http://localhost:3000/

 Example 2: Below is the code example of the express.static() Function

Javascript




const express = require('express');
const app = express();
const path = require('path');
 
// Static Middleware
console.log(app.use(express.static(
    path.join(__dirname, 'public'))))


Steps to run the program:

node index.js

Output:

[Function: app] EventEmitter {
_events: [Object: null prototype] { mount: [Function: onmount] },
_eventsCount: 1,
_maxListeners: undefined,
setMaxListeners: [Function: setMaxListeners],
getMaxListeners: [Function: getMaxListeners],
emit: [Function: emit],
.
.
.
.
locals: [Object: null prototype] {
settings: {
'x-powered-by': true,
etag: 'weak',
'etag fn': [Function: generateETag],
env: 'development',
'query parser': 'extended',
'query parser fn': [Function: parseExtendedQueryString],
'subdomain offset': 2,
'trust proxy': false,
'trust proxy fn': [Function: trustNone],
view: [Function: View],
views: 'C:\\Users\\Lenovo\\Downloads\\GFG
Reviewer Internship\\Program\\views',
'jsonp callback name': 'callback'
}
},
mountpath: '/',
_router: [Function: router] {
params: {},
_params: [],
caseSensitive: false,
mergeParams: undefined,
strict: false,
stack: [ [Layer], [Layer], [Layer] ]
}
}

We have a Cheat Sheet on Express Static Functions where we covered all the express static methods to check those please go through Express express() function Complete Reference article.



Last Updated : 15 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads