How to Serve Static Content using Node.js ? - GeeksforGeeks

27 Apr, 2020
Accessing static files are very useful when you want to put your static content accessible to the server for usage. To serve static files such as images, CSS files, and JavaScript files, etc we use the built-in middleware in node.js i.e. express.static.
Setting up static middleware:
You need to create a folder and add a file. For example, app.js, To run this file you need to run the following command.node app.jsNow create a folder whose content you want to serve as static, For example, you can create a folder named public.Now add some static content to this public folder. In this case, there is a GeeksLogo.png image in public folder.To serve this folder as static, you need the write this middleware in your index.js as follow:app.use(express.static(path.join(__dirname, 'public')))where path is the global object and __dirname holds current directory address. Views is the folder where our all web pages will be kept.Now create a EJS file like Demo.ejs and put this file in views folder.
You need to create a folder and add a file. For example, app.js, To run this file you need to run the following command.node app.js
node app.js
Now create a folder whose content you want to serve as static, For example, you can create a folder named public.
Now add some static content to this public folder. In this case, there is a GeeksLogo.png image in public folder.
To serve this folder as static, you need the write this middleware in your index.js as follow:app.use(express.static(path.join(__dirname, 'public')))where path is the global object and __dirname holds current directory address. Views is the folder where our all web pages will be kept.
Now create a EJS file like Demo.ejs and put this file in views folder.
Filename: Demo.ejs
<!DOCTYPE html><html><head>    <title>Static Middleware Demo</title></head><body>  <img src="/GeeksLogo.png" width="600" height="600" /></body></html>
Filename: app.js
const express = require('express')const path = require('path')const app = express()  // Static Middlewareapp.use(express.static(path.join(__dirname, 'public')))  // View Engine Setupapp.set('views', path.join(__dirname, 'views'))app.set('view engine', 'ejs')  app.get('/', function(req, res){    res.render('Demo')})  app.listen(8080, function(error){    if(error) throw error    console.log("Server created Successfully")})
Steps to run the program:
The project structure will look like this:Make sure you have ‘view engine’ like I have used “ejs” and also install express using the following commands:npm install ejsnpm install expressRun app.js file using below command:node app.jsOpen browser and type this URL:http://localhost:8080/Then you will see the Demo.ejs page as shown below:
The project structure will look like this:
Make sure you have ‘view engine’ like I have used “ejs” and also install express using the following commands:npm install ejsnpm install express
npm install ejs
npm install express
Run app.js file using below command:node app.js
node app.js
Open browser and type this URL:http://localhost:8080/
http://localhost:8080/
Then you will see the Demo.ejs page as shown below:
So this is how you can serve static content to our server which is very helpful in serving images, CSS, js file, etc in your project.
Node.js-Misc
Node.js
Web Technologies
Write From Home
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Node.js fs.writeFile() Method
How to install the previous version of node.js and npm ?
Difference between promise and async await in Node.js
How to use an ES6 import in Node.js?
Express.js res.sendFile() Function
Top 10 Front End Developer Skills That You Need in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript