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
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);
}); |
<!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
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.