Express express.static() Function
Last Updated :
15 Jan, 2024
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:
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;
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' );
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...