Express.js + EJS: Rendering Templates with Dynamic Content


res.render() is the method that we use inside of an Express.js route to identify an HTML or EJS file that would like to render.

app.get("/", function(req, res){

or if you are using an .ejs file

app.get("/", function(req, res){

What is EJS?

EJS is a simple templating language that lets you embed Javascript into HTML templates. IE, build dynamic content into your templates. It is faster and simpler than using a full framework like Angular or React, although less feature rich.

In addition to this post there is a tutorial on EJS here:

“views” directory

The “views” directory is the default directory that express will look in for EJS template files.

Adding Variables to EJS templates

Within your somepage.ejs template file you would add

<%= Javascript or Express Variable %>


<h1> Welcome to the <%= subreddit %> subreddit</h1>

Which you would then pass in the Variable from your Express app file

app.get("/r/:subreddit", function(req, res){
    var sub = req.params.subreddit;
    res.render("subreddit.ejs", {subreddit: sub});

An important thing to note about the example above is that we have included a new object in our response. This object is passing in our variable definitions, as they are not automatically shared. So in short the following is happening in our route:

  • Receive a request for a subreddit
  • Capture the requested subreddit and put it in a variable
  • Respond and send back the template and a list of variables

Then if we navigate to any subreddit, for example /r/capybaras

If you would like more information on how variables work with route parameters I have an extensive post on that subject here:

EJS Tags

In the example above we showed one of the EJS tags, however there are actually several and they are designed to do different things. There is a full list of tags in the EJS Docs but here are a couple of big ones.

<%= %>

As shown in the example above, the equals tag will output the value into the template so that it is visible. As shown in the word “capybaras” above

<% %>

This is the script tag, which is used for logic and control flow Javascript.

<% if (user) { %>
  <h2><%= %></h2>
<% } %>

Looping Over An Array

Here is an example where we display information about articles by looping over an array.

Here is the routing code in the app:

// array sample
app.get("/articles", function(req, res){
    var articles = [
            {title: "Man Discovers Different Opinion", author: "Reginald", date: "9/2/45"},
            {title: "Tigers Aren't Great Pets", author: "Simon", date: "4/13/95"},
            {title: "Eating Cake for Breakfast", author: "Katie", date: "8/20/13"}
    res.render("articles.ejs", {articles: articles})    

And the articles.ejs template file:

<% for(var i=0; i<articles.length; i++){ %>
<h1><%= articles[i].title %></h1>
<h3><%= articles[i].author %></h3>
<h4><%= articles[i].date %></h4>
<% } %>

Which gives us the following result:

.forEach Loop

A more common way to loop over posts would actually be a .forEach loop.

Here is the routing code in the app:

// array sample 2
app.get("/comments", function(req, res){
    var comments = [
            {author: "Adam", content: "I personally have never encountered a different opinion"},
            {author: "Ryan", content: "But what about Ligers? Are they good pets?"},
            {author: "Nick", content: "This woman is a genius!"}
    res.render("comments.ejs", {comments: comments});    

and the comments.ejs template:

<% comments.forEach(function(comment){ %>
<p><strong><%= %></strong></p>
<p><%= comment.content %></p>
<% }) %>

And the result

Express.js Route Parameters

Express + EJS: Styles and Partials