Scribd
Upload
6 views

Exercise-18_Use_EJS

This document provides a step-by-step guide on using Embedded JavaScript templates (EJS) for templating in a Node.js application with Express. It covers configuring the server, creating reusable partials, and passing data to views, including examples of how to render variables and loop through data in EJS. The document concludes with instructions on running the application to see the results in a web browser.

Uploaded by

aeskychung
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Exercise-18_Use_EJS

This document provides a step-by-step guide on using Embedded JavaScript templates (EJS) for templating in a Node.js application with Express. It covers configuring the server, creating reusable partials, and passing data to views, including examples of how to render variables and loop through data in EJS. The document concludes with instructions on running the application to see the results in a web browser.

Uploaded by

aeskychung
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Exercise 18: How To Use EJS to Template Your Node Application

1. Introduction

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

Embedded JavaScript templates (EJS) can be used as an alternative template engine.

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

2. Requirements

 EJS is installed.
 Basic knowledge of HTML.

2.1. Step 1: Configuring with server.js

Create a new file named data.json in your project directory with the following sample
content:

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');
});
const PORT = process.env.PORT || 3000;

Page 1
app.listen(PORT, () => console.log(`Server running on http://localhost:$
{PORT}`));

Next, you will create the views using EJS.

2.2. 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.

Page 2
views/partials/head.ejs

<meta charset="UTF-8" />


<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->


<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/
css/bootstrap.min.css"
/>
<style>
body {
padding-top: 50px;
}
</style>

views/partials/header.ejs

<nav class="navbar navbar-expand-lg navbar-light bg-light">


<a class="navbar-brand" href="/">EJS Is Fun</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</nav>

views/partials/footer.ejs

<p class="text-center text-muted">


&copy; Copyright <span id="year"></span> The Awesome People
</p>
<script>
document.getElementById("year").innerHTML = new Date().getFullYear();
</script>

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

2.3. 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.

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>
</div>
</main>

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


</body>
</html>

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>
<html lang="en">
<head>
<%- include('../partials/head'); %>
</head>
<body class="container">

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

<main>
<div class="row">
<div class="col-sm-8">
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</div>

<div class="col-sm-4">
<div class="well">
<h3>Look I'm A Sidebar!</h3>
</div>
</div>
</div>
</main>

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


</body>
</html>

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

node server.js

3. 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 = [

Page 5
{ 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');
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on http://localhost:$
{PORT}`));

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>

Page 6
</div>
</main>

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


</body>
</html>
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>

Page 7
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:

views/pages/about.ejs

<header><%- include('../partials/header', {variant: 'compact'});


%></header>
But you need to again be careful about assuming a variable has been defined.

If you want to reference a variable in a partial that may not always be defined, and give
it a default value, you can do so like this:

views/partials/header.ejs

<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default'


%></em>
In the line above, the EJS code is rendering the value of variant if it’s defined, and
default if not.

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

Page 8
Page 9

You might also like