A template engine enables you to use static template files in your application.
During runtime, the template engine replaces variables in a template file with actual values and converts the template into an HTML file sent to the client.
There are so many template engines that work with Express. Click here to check the list of template engines.
In this chapter we’ll use EJS template engine
How to use template engines with the Express JS
So, to install the EJS template engine you need to run the below command (Make sure that your app folder is selected on your terminal) –
npm install ejs --saveAfter installing the EJS, now inside your app folder create a new folder and name it views.
Basically, in the views folder, we’ll create our views.
Before creating files let’s take a look at the app folder structure –
So first we will create home.ejs view for home page
home.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home Page</title>
</head>
<body>
<h1>This is Home Page</h1>
</body>
</html>Now after creating the home.js view, we will set up our views and view engine and then will render our home view.
index.js
const express = require('express');
const app = express();
// setup views and view engine
app.set('views', './views');
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
// rendering home.ejs view
res.render('home');
})
app.listen(3000, () => console.log('Your app listening on port 3000'));app.set('views', 'views folder path') – It defines where our views are.
app.set('view engine', 'view engine name') – It defines which view engine(template engine) we are using.
res.render('home') – Rendering the home.ejs view.
You also do that – res.render('home.ejs') but you don’t need to add the .ejs, it will be automatically added because we have already defined the EJS View Engine.
How to send dynamic data to a view
You can send dynamic data to a view by giving an object in the second parameter of the res.render method.
res.render('home', {data:"data"})
Example:
index.js
const express = require('express');
const app = express();
// setup views and view engine
app.set('views', './views');
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
let birds = ['Pigeon','Swallow','Penguin','Bald eagle','Sparrow']
// rendering home.ejs view
res.render('home',{
title : "w3jar.com",
all_birds : birds
});
})
app.listen(3000, () => console.log('Your app listening on port 3000'));home.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home Page</title>
</head>
<body>
<h1><%= title %></h1>
<ul>
<% all_birds.forEach((bird_name) => { %>
<li><%= bird_name %></li>
<% }) %>
</ul>
</body>
</html>w3jar.com
- Pigeon
- Swallow
- Penguin
- Bald eagle
- Sparrow
Click here to learn more about the EJS template engine.
Next is – Express JS Middleware
Previous is – Express JS Retrieve post data
