Explore

How To Use EJS to Template Your Node Application

Peter Sigurdson

When quickly creating Node applications, a fast way to template your application is sometimes necessary.

⁠

Jade⁠

comes as the

default template engine for Express⁠

but Jade syntax can be overly complex for many use cases.

⁠

Embedded JavaScript templates (EJS)⁠

can be used as an alternative template engine.

In this article, you will learn how to apply EJS to an Express application, include repeatable parts of your site, and pass data to the views.

Prerequisites

If you would like to follow along with this article, you will need:

A local development environment for Node.js. Follow

How to Install Node.js and Create a Local Development Environment⁠

Note:

You can find a git repo of the complete demo code on GitHub⁠

This tutorial was originally written for express v4.17.1 and ejs v3.1.5. It has been verified with Node v16.0.0, npm v7.11.1, express v4.17.1, and ejs v3.1.6.

Step 1 — Setting Up the Project

First, open your terminal window and create a new project directory:

mkdir ejs-demo

Copy

Then, navigate to the newly created directory:

cd ejs-demo

Copy

At this point, you can initialize a new npm project:

npm init -y

Copy

Next, you will need to install the express package:

npm install express@4.17.1

Copy

Then install the ejs package:

npm install ejs@3.1.6

Copy

At this point, you have a new project ready to use Express and EJS.

Step 1 — Configuring with server.js

With all of the dependencies installed, let’s configure the application to use EJS and set up the routes for the Index page and the About page.

Create a new server.js file and open it with your code editor and add the following lines of code:

server.js

var express = require('express');

var app = express();

// set the view engine to ejs

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

// use res.render to load up an ejs view file

// index page

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

res.render('pages/index');

});

// about page

app.get('/about', function(req, res) {

res.render('pages/about');

});

app.listen(8080);

console.log('Server is listening on port 8080');

Copy

This code defines the application and listens on port 8080.

This code also sets EJS as the view engine for the Express application using:

`app.set('view engine', 'ejs');`

Copy

Notice how the code sends a view to the user by using res.render(). It is important to note that res.render() will look in a views folder for the view. So you only have to define pages/index since the full path is views/pages/index.

Next, you will create the views using EJS.

Step 2 — Creating the EJS Partials

Like a lot of the applications you build, there will be a lot of code that is reused. These are considered partials. In this example, there will be three partials that will be reused on the Index page and About page: head.ejs, header.ejs, and footer.ejs. Let’s make those files now.

Create a new views directory:

mkdir views

Copy

Then, create a new partials subdirectory:

mkdir views/partials

Copy

In this directory, create a new head.ejs file and open it with your code editor. Add the following lines of code:

views/partials/head.ejs

<style>

body { padding-top:50px; }

</style>

Copy

This code contains metadata for the head for an HTML document. It also includes

Bootstrap⁠

styles.

Next, create a new header.ejs file and open it with your code editor. Add the following lines of code:

views/partials/header.ejs

</li>

<a class="nav-link" href="/about">About</a>

</li>

</ul>

</nav>

Copy

This code contains navigation for an HTML document and uses several classes from Bootstrap for styling.

Next, create a new footer.ejs file and open it with your code editor. Add the following lines of code:

views/partials/footer.ejs

Copy

This code contains copyright information and uses several classes from Bootstrap for styling.

Next, you will use these partials in index..ejs and about.ejs.

Step 3 — Adding the EJS Partials to Views

You have three partials defined. Now you can include them in your views.

Use <%- include('RELATIVE/PATH/TO/FILE') %> to embed an EJS partial in another file.

The hyphen <%- instead of just <% to tell EJS to render raw HTML.

The path to the partial is relative to the current file.

Then, create a new pages subdirectory:

mkdir views/pages

Copy

In this directory, create a new index.ejs file and open it with your code editor. Add the following lines of code:

views/pages/index.ejs

<!DOCTYPE html>

<head>

<%- include('../partials/head'); %>

</head>

<%- include('../partials/header'); %>

</header>

<main>

<h1>This is great</h1>

<p>Welcome to templating using EJS</p>

</div>

</main>

<%- include('../partials/footer'); %>

</footer>

</body>

</html>

Copy

Save the changes to this file and then run the application:

node server.js

Copy

If you visit http://localhost:8080/ in a web browser, you can observe the Index page:

⁠

Screenshot of the index page with head, header, and footer partials rendered

⁠

Next, create a new about.ejs file and open it with your code editor. Add the following lines of code:

views/pages/about.ejs

<!DOCTYPE html>

<head>

<%- include('../partials/head'); %>

</head>

<%- include('../partials/header'); %>

</header>

<main>

<h1>This is great</h1>

<p>Welcome to templating using EJS</p>

</div>

<h3>Look I'm A Sidebar!</h3>

</div>

</main>

<%- include('../partials/footer'); %>

</footer>

</body>

</html>

Copy

This code adds a Bootstrap sidebar to demonstrate how partials can be structured to reuse across different templates and pages.

Save the changes to this file and then run the application:

node server.js

Copy

If you visit http://localhost:8080/about in a web browser, you can observe the About page with a sidebar:

⁠

Screenshot of the About page with head, header, and footer partials rendered and sidebar displayed.

⁠

Now you can start using EJS for passing data from the Node application to the views.

Step 4 — Passing Data to Views and Partials

Let’s define some basic variables and a list to pass to the Index page.

Revisit server.js in your code editor and add the following lines of code inside the app.get('/') route:

server.js

var express = require('express');

var app = express();

// set the view engine to ejs

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

// use res.render to load up an ejs view file

// index page

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

var mascots = [

{ name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},

{ name: 'Tux', organization: "Linux", birth_year: 1996},

{ name: 'Moby Dock', organization: "Docker", birth_year: 2013}

];

var tagline = "No programming concept is complete without a cute animal mascot.";

res.render('pages/index', {

mascots: mascots,

tagline: tagline

});

// about page

app.get('/about', function(req, res) {

res.render('pages/about');

});

app.listen(8080);

console.log('Server is listening on port 8080');

Copy

This code defines an array called mascots and a string called tagline. Next, let’s use them in index.ejs.

Rendering a Single Variable in EJS

To echo a single variable, you can use <%= tagline %>.

Revisit index.ejs in your code editor and add the following lines of code:

views/pages/index.ejs

<!DOCTYPE html>

<head>

<%- include('../partials/head'); %>

</head>

<%- include('../partials/header'); %>

</header>

<main>

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.