Using EJS as a Template Engine in your Express App

Linda Ikechukwu

·

Follow

·

Nov 8, 2018

4 min read

—

image from nodeacademy.it

For this article, I would start by defining and explaining the basic concepts that this article covers so as to enable even novices scale through.

What is a Template Engine?

A template engine is a tool that enables frontend/ full-stack developers to write HTML markup, peppered with its(the template engine’s) defined tags or syntax that will either insert variables into the final output of the template or run some programming logic at run-time before sending the final HTML to the browser for display.

What is EJS?

EJS simply stands for Embedded Javascript. It is a simple templating language/engine that lets its user generate HTML with plain javascript. It offers an easier way to interpolate (concatenate) strings effectively.

When to use EJS

EJS is mostly useful whenever you have to output HTML with a lot of javascript if you’re dealing with generating dynamic contents or offering something that has to do with real-time updates. Imagine having to do this:

var html = "<h1>"+data.title+"</h1>"
html += "<ul>"
for(var i=0; i<data.supplies.length; i++) {
    html += "<li><a href='supplies/"+data.supplies[i]+"'>"
    html += data.supplies[i]+"</a></li>"
}
html += "</ul>"

Now that is a lot of syntax, confusing and not so pretty. This is where EJS saves the day. As compared to writing that pretty confusing JavaScript code, you could do this:

<h1><%=title%></h1>
<ul>
   <%for (var i=0;i<supplies.length; i++){%>
     <li>
         <a href='supplies/<%= supplies[i] %>'></a>
         <%=supplies[i]%>
     </li>
   <%}%>
</ul>

This, on the other hand, is prettier to the eye and much more understandable once you get the flow of things.

Why EJS?

Now while there are several templating systems out there with their merits and demerits, I personally use EJS because of its simplicity in syntax and logic. It’s also very easy to set up.

Getting Started

To get started using ejs in your express app, the first thing to do is to install with npm into your project folder.

npm install ejs --save

Next, Express uses jade as its default template engine,so we would have to tell it to use ejs instead with the following line to your app.js file in the root folder of your project :

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

Now we’re all set and can start using ejs in our project. One thing to note is that all files in which ejs syntax are used in must be saved with a .ejs extension and located in the views folder in the root directory of the project. i.e

app.js
package.json
package-log.json
views
    |_ home.ejs
       linda.ejs

You may wonder does the directory name for ejs files really have to be named views?? Well by default express is configured to look for template files to render in any directory called views. If you’re not comfortable with this, you can always change that by including the following line in your app.js file.

app.set("views","./yourcustomname");

Express also lets us include partials. Imagine setting up a site in which all/some of the pages have the same nav and footer. Having to rewrite those for each of the pages would be a pain in the ass. With express, all you have to do is to create a sub-directory named partials or whatever name you prefer inside your views directory and put all your modular/shared files there. i.e

views
  home.ejs
  linda.ejs 
  |_
    Partials
           |_
              header.ejs
              footer.ejs

To include in files, simply do

                      home.ejs
<%include partials/header%>
  .....other stuff....
<%include partials/footer%>

Understanding The Syntax — The Tags

While using express, there are 4 major tags that you will need to understand;

1. `<% %>` : This is used to embed javascript codes that do return outputs e.g control flow, conditionals, variable declaration, include statements e.t.c

<%for(let i = 0; i < 2; i++) {%>
  <p> 
    Row Row Row your boat.
    gently down the stream,
    Merrily ...... ......
  <p>
<%}%>

2. `<%= %>` : Used to embed code that is supposed to return and output the result of an expression/computation to the view(page) at run-time. e.g

<%for(let i = 0; i < 20; i++) {%>
   <ul>
     <li> <%= i * 5  %></li>
  </ul>
<%}%>

This will output the value of i * 5 for each instance of i into an <li> at run-time.

3. `<%- %>` : This takes a string and outputs it’s unescaped value to the view.

4. `<%# %>` : Used to include comments in files.

For further reading, you can take a look at the official docs for ejs.

Happy coding!!!

Update: I now publish frontend articles just like this tailored for beginner frontend developers on my personal blog. You should definitely check it out.