Master EJS template engine with Node.js and Expressjs

Petros Koulianos
Mar 10 · 6 min read
Photo by Jon Tyson on Unsplash

1.Introduction

EJS is among the most popular tempate view engines for node.js and expressjs with 4.2k stars at github and over 5.5m downloads per week at npm.

EJS simply stands for Embedded JavaScript templates, and we can use it both server-side or client-side. At this story, we’ll focus on the server-side.

Basic Syntax(Tags):

  • <% 'Scriptlet' tag, for control-flow, no output
  • <%= Outputs the value into the template (HTML escaped)
  • <%- Outputs the unescaped value into the template

Example:

This story will be quite long so grab a cup of your favorite coffee and enjoy it.

2. Partials

In this section we’ll learn how to use <%- include(‘’)-%> tag.

Download the starter app from startEJS .

Project structure:

Head into the project directory:

Install express and ejs:

Lets see our index.js file:

First we set up the view engine and the views directory

We set up our public folder for static files

Last we add the ‘/’ route to render the views/pages/home.ejs page

home.ejs

EJS uses <%- include(‘’)-%> tag to include HTML from other files, in our app, we have the HTML templates at /views/template folder.

Finally lets run the app

Hit http://localhost:3000

3. Render Links

In this section, we’ll learn how to render links dynamically.

Paste the new router at app.js file with some data to send

Create a new file with name links.ejs in views/pages folder and paste the following code

Lets talk about the previous code snippets.

This time at res.render function after the name of the file we want to render we pass a JSON object.

This JSON object will pass to the view pages/links.ejs. At this point, we use foreach function to iterate the links array and use “<%=” tag to output the properties url and name.

Run the app

Hit /links

Example with links

3. Render List

In this section, we’ll learn how to render a list dynamically.

Paste the new router at app.js file with some data to send

Create a new file with name list.ejs in views/pages folder and paste the following code

Run the app

Hit /list

Example with list

4. Render Table

In this section, we’ll learn how to render a table dynamically.

Paste the new router at app.js file with some data to send

Create a new file with name table.ejs in views/pages folder and paste the following code

Run the app

Hit /table

Example with table

4. Render Alert Messages

In this section, we’ll learn how to render a alert messages dynamically.

This section we be a little more complicated because we have to build a custom tiny middleware to send the alert messages.

Create a new file with name form.ejs in views/pages folder and paste the following code

Create a new file with name messages.ejs in views/template folder and paste the following code

At this point, we have created a simple form but we have included a new partial messages.ejs.

The messages.ejs checks for a message object and if a message object is not null shows a alert message.

But if the message object doesn’t exist at all EJS with through a compile error. In order to pass through this situation we will create a tiny middleware that will use res.locals to pass every time the message object.

Install body-parser to parse the post data to req.body

Paste the following code at app.js file

Run the app

Hit /form

Example with form and alert message

5. Conclusion

Get the full sample app from masterEJS.

EJS is a great template view engine for fast production environments and with a very smooth learning curve.

Feel free to comment me for any misundestandings , ideas , changes etc.

References

  1. nodejs
  2. ejs
  3. express
  4. getBootstrap

Thanks for reading my story

The Startup

Medium's largest active publication, followed by +611K people. Follow to join our community.

Petros Koulianos

Written by

Passionate Developer with main interests at node.js and java, marathoner, mountaineering. petranb2@gmail.com

The Startup

Medium's largest active publication, followed by +611K people. Follow to join our community.

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade