This article show how you can use Embedded Javascript (EJS) in your Node.js & Express application. EJS is an open-source Javascript Template Library.
There are different other Javascript Templating languages/libraries like Mustache, Pug, Jade, etc. which can also be used in your Node.js & Express application. This tutorial uses EJS as the templating language for our Node & Express example app.
I suppose, you have already installed Express module. If not, you may refer to my previous article on Introduction & Hello World module using Node.js & Express.
Here’s is a step-by-step guide on templating using EJS:
- Open terminal/command-prompt
Go to you node module/project directory. In my case, the directory is /var/www/html/test/nodejs/myapp.
mukesh@chapagain:~$ cd /var/www/html/test/nodejs/myapp
mukesh@chapagain:/var/www/html/test/nodejs/myapp$
- Install EJS module with the following command:
npm install ejs -saveNote the -save option at the end of the command. This will automatically add the installed module dependency in the project.json file.
A Simple Hello World application using EJS
The application server listens to port 3000.
app.js
var express = require('express');
var app = express();
// setting up the templating view engine
app.set('view engine', 'ejs');
app.get('/', function(request, response){
response.render('index', {title: 'My Homepage', msg: 'Hello World'});
});
app.listen(3000, function(){
console.log('Server running at port 3000: http://127.0.0.1:3000');
});
The HTML template for EJS should be inside views folder. So, create a new folder named “views” and then create a new file named index.ejs inside “views” folder.
We have to create the template file with name index.ejs because we have specified “index” as the file name in the above code while rendering the response.
views/index.ejs
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<div><%= msg %></div>
</body>
</html>
In the JS code, you can see that inside response.render() function, we have passed two Javascript variables “title” and “msg” with some values. These values are passed to index.ejs view file. In the index.ejs file, these variables can be printed using <%= %> tag.
Now, go to your project folder and run the following command on terminal/command-prompt:
node app.jsAfter this, you can open URL http://127.0.0.1:3000 in your browser and you will be able to see the content of index.ejs file with the title and msg as passed in response.render function in app.js file.
An Express & EJS application using Array data
This example is little advance than the above one. It displays the list of array data and also individual array element’s data.
Here’s the working format of the application.
– The users array contains list of users with user’s name, age and email.
– Each user is identified by a particular user ID.
– We will show only the name of users in homepage.
– We will put a ‘View Detail’ link beside every user’s name in the homepage user listing.
– We will show the individual user details (name, age, email) on ‘View Detail’ page.
app.js
var express = require('express');
var app = express();
// setting up the templating view engine
app.set('view engine', 'ejs');
// users array
var usersList = [
{
id: 1,
name: 'Mukesh Chapagain',
age: 99,
email: 'mukesh@example.com'
},
{
id: 2,
name: 'Brad Pitt',
age: 80,
email: 'brad@example.com'
},
{
id: 3,
name: 'Steve Smith',
age: 56,
email: 'steve@example.com'
},
{
id: 4,
name: 'Darren Sammy',
age: 48,
email: 'sammy@example.com'
}
];
app.get('/', function(request, response){
response.render('index', {title: 'My Homepage', msg: 'Hello World'});
});
// for users list page
app.get('/users', function(request, response){
/**
* render to views/users.ejs template file
* usersList is set to users variable
*/
response.render('users', {users: usersList});
});
// for individual user page
app.get('/user/:id', function(request, response){
/**
* Get the individual user details using request param ID
*
* We use array.filter() function for this purpose
*
* filter() is a Javascript function that creates a new array with elements
* that satisfies the conditions present in the callback function
*/
var singleUser = usersList.filter(function(user){console.log(user.id); return user.id == request.params.id});
/**
* The filter creates a new array with single user element
* Hence, getting the value of the first and only element
*/
var singleUser = singleUser[0];
/**
* render to views/user.ejs template file
* name, age & email variables are passed to the template
*/
response.render('user', {
name: singleUser.name,
age: singleUser.age,
email: singleUser.email
});
});
app.listen(3000, function(){
console.log('Server running at port 3000: http://127.0.0.1:3000');
});
views/users.ejs
<html>
<head>
<title>All Users</title>
</head>
<body>
<h1>All Users</h1>
<div>
<!--
Using FOREACH LOOP for the users array
myArray.forEach(function(el, index) {
// el - current element, i - index
});
-->
<% users.forEach(function(user){ %>
<%= user.name %> <a href='/user/<%= user.id %>'>View Details</a>
<% }) %>
</div>
</body>
</html>
views/user.ejs
<html>
<head>
<title>Single User</title>
</head>
<body>
<h1>User Details</h1>
<div>
Name: <%= name %>
Age: <%= age %>
Email: <%= email %>
</div>
</body>
</html>
node app.jsAfter this, you can open URL http://127.0.0.1:3000 in your browser and you will be able to see the content of index.ejs file with the title and msg as passed in response.render function in app.js file.
– Open URL http://127.0.0.1:3000/users
– You will be able to see the list of users with “View Details” link
– Click on the “View Details” link
– It will redirect you to http://127.0.0.1:3000/user/ID. Here, you can see the details of the user like name, age, and email.
Hope this helps. Thanks.