Node JS Tutorial - Template Engines

In this tutorial, we will learn about Template Engines, a tool that enables frontend developers to write HTML markup that can insert variables into the final output of the template or run programming logic at runtime before sending the final HTML to the browser for display.

Introduction to EJS Template Engine

We will be using the EJS Template Engine, which stands for Embedded JavaScript. It is a simple templating engine that allows us to embed JavaScript code inside our HTML templates.

Using EJS Template Engine

To use the EJS Template Engine, we first need to install it. Go to the command prompt and run the command:


npm install ejs

Next, go to the project and inside the index.js file, set the view engine:


app.set("view engine","ejs");

Create a folder inside the root directory, for example, "views". Inside this folder, create some EJS files, such as "home.ejs", "about.ejs", and "contact.ejs".

Creating EJS Templates

Open the "home.ejs" file and write the following code:


<!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">
    <title>Home</title>
</head>
<body>
    <h1>This is Home Page</h1>
</body>
</html>

Open the "about.ejs" file and write the following code:


<!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">
    <title>About</title>
</head>
<body>
    <h1>This is About Page</h1>
</body>
</html>

Open the "contact.ejs" file and write the following code:


<!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">
    <title>Contact</title>
</head>
<body>
    <h1>This is Contact Page</h1>
</body>
</html>

Go back to the index.js file and add the following code:


app.get('/home', (request, response) => { 
  response.render('home');
}); 
app.get('/about', (request, response) => { 
  response.render('about');
}); 
app.get('/contact', (request, response) => { 
  response.render('contact');
});

Running the Application

Run the application by going to the command prompt and running the index.js file:


node index.js

Switch to the browser and go to the URL localhost:3000/home. You should see the home page. Go to the about page, and you should see the About page. Go to the contact page, and you should see the Contact page.

Passing Data to Views

Let's create an object and pass it to the view:


app.get('/home', (request, response) => { 
  var student = { 
    "name":"jenifer", 
    "age":25, 
    "sex":"Female"
  } 
  response.render('home',{'student':student});
});

Go to the "home.ejs" file and display the name, age, and sex:


<%= student.name %> 
<%= student.age %> 
<%= student.sex %>

Re-run the index.js file, switch to the browser, and go to the URL /home. You should see the name, age, and sex displayed.

Using Conditional Statements

Let's use an if statement in the "home.ejs" file:


<% if (user.age>=18) { %> 
  <h2>You are adult</h2> 
<% }else{%> 
  <h2>You are not adult</h2> 
<% } %>

Save and switch to the browser. You should see the message "You are adult". If you change the age to 16, you should see the message "You are not adult".

Using Loops

Let's use a loop in the "home.ejs" file:


<%for(let i = 1; i <= 10 i++) {%> 
  <p> <%= i%><p> 
<%}%>

Run the application, switch to the browser, and refresh the page. You should see the numbers 1 to 10 displayed.

This is how you can use Template Engines in Node.js.