EJS Templates for NodeJS

3 min readAug 17, 2023

Reusable components in your NodeJS web application

As we code a website, it quickly becomes evident that some components can be reused across pages or sections — e.g. the navigation bar, loading screens, pop-ups etc. When this happens, we can convert these reusable components into templates.

There are a few ways to do that in website development, but in this article I will just write about using the EJS (Embedded JavaScript), which I find to be one of the simplest methods.

I assume you already know how to create a skeleton NodeJS web application, otherwise I have some articles about setting up and creating the first webpage that might be helpful.

Install ejs

From the command prompt (Windows) or Terminal (Mac), navigate to your project folder and type the following command to install the ejs package:

npm install ejs

Configure your Express app

Next, configure your Express application to use ejs by adding this line in your .js file, somewhere after the express() line:

var express = require('express');
var app = express();

app.set('view engine', 'ejs'); //<---- add this line

Create new folders in your project

Create a new /views directory at the root.

I further categorise the files by creating the subdirectories /views/partials for the reusable components and /views/site for the pages.

For example, I have this template now called /views/partials/button.ejs (note that the file type is .ejs!):

<div>
  <span>This is some text</span>
  <button class="btn">Click Me!</button>
</div>

And I have a page (that uses this template) saved as /views/site/dashboard.ejs:

<html>
    <head></head>
    <body>
        <div> This is some body in our dashboard page</div>
        <%- include('../partials/button'); %>
    </body>
</html>

You will notice that .ejs is omitted when you include the template. If you encounter errors, please check that the path is correct.

Restart your application to see the changes on the browser. In subsequent changes (to the pages) you can see the updates by just clicking refresh.

Displaying our new page

To view the new dashboard page, we can add the following code to our express app:

app.get("/dashboard", (req, res) => {
    res.render('site/dashboard', { });
});

Notice that we do not need to mention “.ejs” in the parameter.

Passing data to the partials

Of course, it’s not plausible that all our buttons are going to be “Click Me”. Sometimes we need to have variables for our template. We can then modify the code a little like this:

<div>
  <span><%= description %></span>
  <button class="btn"><%= label %></button>
</div>

This tells the template that it’s waiting for 2 variables, description and label, in order to render properly.

The page that uses the template will then need to provide these 2 variables in json format:

<html>
    <head></head>
    <body>
        <div> This is some body in our dashboard page</div>
        <%- include('../partials/button', 
          {'description':'Hello World', 'label':'Read More'}); %>
        <%- include('../partials/button', 
          {'description':'Another Button', 'label':'Visit Us'}); %>
    </body>
</html>

And that is all you need to do in order to arrange your website into neat, reusable components! Have fun coding.