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:
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>
<html lang="en">
<head>
<%- include('../partials/head'); %>
</head>
<body class="container">
<header>
<%- include('../partials/header'); %>
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
<h2>Variable</h2>
<p><%= tagline %></p>
</div>
</main>
<footer>
<%- include('../partials/footer'); %>
</footer>
</body>
</html>
Copy
This code will display the tagline value on the Index page.
Looping Over Data in EJS
To loop over data, you can use .forEach.
Revisit index.ejs in your code editor and add the following lines of code:
views/pages/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('../partials/head'); %>
</head>
<body class="container">
<header>
<%- include('../partials/header'); %>
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
<h2>Variable</h2>
<p><%= tagline %></p>
<ul>
<% mascots.forEach(function(mascot) { %>
<li>
<strong><%= mascot.name %></strong>
representing <%= mascot.organization %>,
born <%= mascot.birth_year %>
</li>
<% }); %>
</ul>
</div>
</main>
<footer>
<%- 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 with the mascots:
Passing Data to a Partial in EJS
The EJS partial has access to all the same data as the parent view. But be careful. If you are referencing a variable in a partial, it needs to be defined in every view that uses the partial or it will throw an error.
You can also define and pass variables to an EJS partial in the include syntax like this:
In the line above, the EJS code is rendering the value of variant if it’s defined, and default if not.
Conclusion
In this article, you learned how to apply EJS to an Express application, include repeatable parts of your site, and pass data to the views.
EJS lets you build applications when you do not require additional complexity. By using partials and having the ability to easily pass variables to your views, you can build some great applications quickly.
