Ejs Template Engine in Node.js

EJS, or Embedded JavaScript, is a popular templating engine for Node.js that allows you to create dynamic HTML pages by embedding JavaScript code into your templates. It provides a simple syntax, making it easier to work with dynamic data and create reusable components for your web applications. In this article, we will explore how you can create ejs template in nodejs.

Introduction

It is a flexible and lightweight template engine that simply integrates with Node.js. With EJS, you can easily build dynamic web pages by embedding JavaScript code within your HTML templates. It allows you to generate dynamic content based on data from your server.

Implementation – EJS template Engine

Before we start, we need to focus on our previous articles in which we learned about S3 Bucket, JWT, and much more. we will continue the EJS implementation in that project with proper folder structure and follow the MVC pattern.

Installing required packages

npm i ejs path 

Creating Files & Folders

Now we have installed the required packages, now create a new folder named Views and create a file Landing.ejs, or follow the below screenshot.

Changes in Server.js Files

Now we need to set view engines in our app and configure the path for View Folder by which we can open the webpage. so open your server.js file and paste this code or follow the below screenshot.

import path from 'path';


app.set('Views', path.join(__dirname, 'Views'));
app.set('view engine', 'ejs');

Creating Routes For Pages

Now we have created the pages now we will set the redirection for the pages(Landing). to do so create a new folder named PagesRoutes and create a new file named LandingRoutes.js and paste this code or follow the below screenshot.

import express from 'express';
const router = express.Router();

router.get('/', function (req, res, next) {
    const Baseurl = req.protocol + '://' + req.headers.host + '/';
    res.render('Landing', { Baseurl: Baseurl });
});


module.exports = router;

Now Require the PageRoutes in Server.js as we have done for API Routes. so open your server.js and paste this code.

readdirSync('./PagesRoutes').map(route => app.use('/', require(`./PagesRoutes/${route}`)));

After above steps write some simple code HTML in Landing.ejs or paste this code.

    <h1>Welcome to Landing Page</h1>

Hit the Endpoint

Now everything is done you can simply go to ‘http://localhost:4000/’ and see the changes.

Now you see your changes for any query comment below the article.

Read More
https://scribblersden.com/quick-sort/

Follow Us on
https://www.linkedin.com/company/scribblers-den/
https://www.facebook.com/scribblersden.blogs

Thank You