Home » Node.js8 August 2017

Node.js & Express: Templating using EJS

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.

– Install EJS module with the following command:

Note 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

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

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:

After 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

views/users.ejs

views/user.ejs

After 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.

Node.js

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed