How to do Templating using ExpressJS in Node.js ?
Last Updated :
11 Apr, 2023
Template Engine : A template engine basically helps us to use the static template files with minimal code. At runtime, the template engine replaces all the variables with actual values at the client-side.
Templating Engine Examples:
- EJS (Embedded JavaScript Templating)
- Pug
- Mustache
In this article we are going to use EJS engine.
Basic ExpressJS Server:
Javascript
const express = require( 'express' );
const app = express();
app.get( '/' , (req , res)=>{
res.send( "GeeksforGeeks" );
})
app.listen(4000 , ()=>{
console.log( "server is running on port 4000" );
})
|
Output:
Adding of EJS Engine: Here we need to set ejs as our view engine.
Javascript
const express = require( 'express' );
const app = express();
app.set( 'view engine' , 'ejs' );
app.get( '/' , (req , res)=>{
res.send( "GeeksforGeeks" );
})
app.listen(4000 , ()=>{
console.log( "server is running on port 4000" );
})
|
Filename: index.ejs
html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
</ body >
</ html >
|
Output:
output
Rendering of EJS file:
Javascript
const express = require( 'express' );
const app = express();
app.set( 'view engine' , 'ejs' );
app.get( '/:name' , (req , res)=>{
res.render( "index" , {
data : req.params.name
});
})
app.listen(4000 , ()=>{
console.log( "server is running on port 4000" );
})
|
Storing of data : Here we have to store the data var name = "<%= data %>"
.
Javascript
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
<meta name= "viewport"
content= "width=device-width, initial-scale=1.0" >
<script type= "text/javascript" >
var name = "<%= data %>"
setTimeout(()=>{
document.getElementById( 'hello' ).innerHTML = name;
},1000);
</script>
</head>
<body>
<h1 id= "hello" ></h1>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...