How to Setup View Engine in Node.js ? - GeeksforGeeks

27 Apr, 2020
View engines are useful for rendering web pages. There are many view engines available in the market like Mustache, Handlebars, EJS, etc but the most popular among them is EJS which simply stands for Embedded JavaScript. It is a simple templating language/engine that lets its user generate HTML with plain javascript.
Installation of ejs module:
You can visit the link Install ejs module. You can install this package by using the following command.npm install ejsAfter installing multer you can check your ejs version in command prompt using the command.npm version ejsAfter that, you can just create a folder and add a file for example app.js, To run this file you need to run the following command.node app.jsTo setup view engine, you need the write this middleware in your index.js as follow:app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')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 can visit the link Install ejs module. You can install this package by using the following command.npm install ejs
npm install ejs
After installing multer you can check your ejs version in command prompt using the command.npm version ejs
npm version ejs
After that, you can just 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
To setup view engine, you need the write this middleware in your index.js as follow:app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')where path is the global object and __dirname holds current directory address. Views is the folder where our all web pages will be kept.
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')
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>View Engine Demo</title></head><body>    <!- For printing variable these      tags are used: <%= %>  -->  <h1> <%= title %> </h1>       <!- For business logic these      tags are used: <% %> -->  <% if(true){ %>      <h4>Greetings from geeksforgeeks</h4>   <% } %></body></html>
Filename: app.js
const express = require('express')const path = require('path')const app = express()  // View Engine Setupapp.set('views', path.join(__dirname, 'views'))app.set('view engine', 'ejs')  app.get('/', function(req, res){      // Rendering our web page i.e. Demo.ejs    // and passing title variable through it    res.render('Demo', {        title: 'View Engine 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 ejs
npm 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 ejs
npm 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 setup a view engine in node js. There are many other engines exist like Handlebars, Mustache, etc.
Node.js-Misc
Node.js
Web Technologies
Web technologies Questions
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.readFile() Method
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?
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