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