How To Use EJS to Template in Node js

EJS is effectively a JavaScript runtime. Its entire job is to execute JavaScript. If you run the EJS render method without checking the inputs yourself, you are responsible for the results.check official tutorial on ejs portal.

Introduction

EJS (Embedded JavaScript Templates) is a popular templating engine that allows you to generate dynamic HTML in your Node.js applications. It simplifies the process of injecting dynamic content into your views and is widely used with Express.js. In this guide, we will walk through the steps to set up and use EJS to create a login page in a Node.js application.

EJS example in Node.js or EJS for dynamic web pages

Step 1: Setting Up the Node.js Application

Before we begin, ensure that you have Node.js and npm installed on your system. If not, download and install them from the official Node.js website.

1.1 Create the app.js File

First, create a new file named app.js and open it in your preferred code editor. Then, add the following lines of code:

var express = require('express');
var app = express();

// Set EJS as the templating engine
app.set('view engine', 'ejs');

// Define routes
app.get('/', function (req, res) {
   res.send('Hello World');
});

app.get('/myLogin', function (req, res) {
    res.render('login');
});

// Start the server
var server = app.listen(8081, function () {
   var host = server.address().address;
   var port = server.address().port;
   console.log("Example app listening at http://%s:%s", host, port);
});

This code initializes an Express.js application, sets EJS as the templating engine, and defines two routes: one for the homepage (/) and another for the login page (/myLogin).

Step 2: Creating the EJS Template

Next, create a views folder in your project directory and add a file named login.ejs inside it. This file will contain the HTML structure for the login page.

2.1 Creating the login.ejs File

<!DOCTYPE html>
<html lang="en">
<head>
  <title>How To Use EJS to Template in Node Application with Login Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Login Form</h2>
  <form action="/save.ejs">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>
</body>
</html>

This login page contains a simple form with fields for email and password, styled using Bootstrap.

Step 3: Setting Up package.json

The package.json file manages project dependencies and configurations. Create this file in your project directory with the following content:

{
  "name": "How To Use EJS to Template in Node.js",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/node-dev ."
  },
  "keywords": [
    "node.js",
    "EJS",
    "templating",
    "Express.js"
  ],
  "author": "Developer India",
  "license": "MIT",
  "dependencies": {
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "morgan": "^1.10.0",
    "spdy": "^3.4.7"
  },
  "devDependencies": {
    "node-dev": "^3.1.3"
  }
}

Step 4: Installing Dependencies and Running the Application

Run the following command to install the required dependencies:

npm install ejs express morgan spdy

Once the installation is complete, start the application using:

node app.js

If everything is set up correctly, you should see an output like:

Example app listening at http://localhost:8081

Now, navigate to http://localhost:8081/myLogin in your browser to view the EJS-rendered login page.

Conclusion

In this guide, we explored how to use EJS as a templating engine in a Node.js application. We covered:

Setting up a Node.js project with Express.js
Creating a basic app.js file
Using EJS to template dynamic content
Setting up a login form using EJS
Running the application

Using EJS simplifies dynamic content rendering, making it an essential tool for building scalable and maintainable web applications.

You can create applications with EJS when you don't need any extra complexity.You can create amazing applications fast by using partials and making it simple to add login page and render to your views.

EJS (Embedded JavaScript) is a powerful and lightweight templating engine that simplifies the process of creating dynamic web pages in Node.js applications. By following this guide, you’ve learned how to set up EJS, create an app.js file, and build a login page using EJS views. EJS is particularly useful for developers who want to avoid unnecessary complexity and quickly build applications with reusable components like partials. Its seamless integration with Express.js and support for dynamic data rendering make it an excellent choice for beginners and experienced developers alike. Whether you're building a simple login page or a more complex application, EJS provides the flexibility and efficiency you need to get started. Start using EJS in your Node.js projects today and experience the ease of creating dynamic, data-driven web applications!