Blog 
/ - GET to display the home page /about - GET to display the about page 
Apr 2, 2016 - 7 MIN READ
Example Using EJS Templating in Node.js Application
Learn how to use EJS templating in a Node.js application.
Jennifer Bland
EJS, embedded javascript, is a templating language. EJS combines data and a template to produce HTML. One of the most important feature in EJS is the use of partials. Partials allow you to define something once and then apply it to any page in your application.
I will show you how to create a simple Node.js application that uses EJS as the templating engine. Then we will create 2 pages for the website. We will use partials to build out our head, navigation, footer and content.
<!--more-->
File Structure
Here is the file structure for the application we will be creating.
- public ---- style.css - routes ---- index.js - views ---- pages -------- about.ejs -------- index.ejs - partials -------- 3columns.ejs -------- footer.ejs -------- head.ejs -------- nav.ejs -------- scripts.ejs - package.json - server.js
Getting Started
- express
- ejs
{ "name": "node_ejs_boilerplate", "version": "1.0.0", "description": "Boilerplate showing the use of ejs as view template engine in a Node.js application", "author": "Jennifer Bland", "main": "server.js", "dependencies": { "ejs": "^2.4.1", "express": "^4.13.4", "serve-favicon": "^2.3.0" } }
npm install express ejs --save
npm install
Server.js
'use strict'; // ================================================================ // get all the tools we need // ================================================================ var express = require('express'); var routes = require('./routes/index.js'); var port = process.env.PORT || 3000; var app = express();
// ================================================================ // setup our express application // ================================================================ app.use('/public', express.static(process.cwd() + '/public')); app.set('view engine', 'ejs');
// ================================================================ // setup routes // ================================================================ routes(app);
// ================================================================ // start our server // ================================================================ app.listen(port, function() { console.log('Server listening on port ' + port + '...'); });
We define a /public directory because this is how we will reach our stylesheet style.css located in the /public folder.
We define our templating engine to be ejs.
Routes
Since I have put the routes in their own folder I need to gain access to them by requiring them in the server.js file.
We have 2 routes in our application:
<ul>
Here is our index.js file in the routes folder:
<pre class='prettyprint'><xmp>
'use strict';
module.exports = function(app) { app.get('/', function(req, res) { res.render('pages/index'); });
app.get('/about', function(req, res) {
res.render('pages/about');
});
};
Configuring our Partials
- head - contains items found in the head section of a webpage
- nav - the navigation that will be displayed on every page
- footer - static footer with link to my website
- scripts - loading scripts like jQuery and Bootstrap
- 3columns - content that will be displayed on the homepage
<!-- views/partials/head.ejs --> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Demonstration of EJS templating in NodeJS Application</title> <!-- STYLESHEETS --> <!-- CSS (load bootstrap from a CDN) --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="/public/style.css">
<!-- views/partials/nav.ejs --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/"> <span class="glyphicon glyphicon glyphicon-cog"></span> CodePrep.io </a> </div> <ul class="nav navbar-nav pull-right"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </div>
<!-- views/partials/footer.ejs --> <footer class="footer"> <div class="container"> <p class="text-center text-muted">© Copyright 2015 <a href="http://www.codeprep.io">CodePrep.io</a></p> </div> </footer>
<!-- views/partials/scripts.ejs --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Bootstrap javascript file --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- views/partials/3columns.ejs --> <section name="content"> <div class="container"> <h2 class="text-center">Sample Data</h2> <div class="col-xs-12 col-md-4"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget iaculis lorem. Fusce elementum magna fringilla ipsum bibendum, vitae consectetur ligula interdum. Sed mauris diam, hendrerit eget suscipit vel, luctus at odio. Etiam pellentesque a metus et pharetra. Praesent dictum, libero id tempor malesuada, erat ex cursus nibh, ac hendrerit massa neque commodo metus. Integer porttitor ante eu varius interdum. Suspendisse quis iaculis erat. Fusce eu nisl id eros tempor posuere. Donec placerat orci orci, ut ultrices neque rutrum in. Nunc dignissim ante et risus rhoncus, vel feugiat mi vestibulum. Aliquam in dictum neque, non vestibulum lorem. Sed imperdiet dolor vitae felis iaculis, id sollicitudin lectus rhoncus. Maecenas ac dolor eget tortor rutrum commodo. Aliquam luctus iaculis mi id semper. Suspendisse sem nisi, convallis at dapibus in, convallis eu neque. Curabitur maximus magna et nulla ullamcorper facilisis.</p> </div> <div class="col-xs-12 col-md-4"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget iaculis lorem. Fusce elementum magna fringilla ipsum bibendum, vitae consectetur ligula interdum. Sed mauris diam, hendrerit eget suscipit vel, luctus at odio. Etiam pellentesque a metus et pharetra. Praesent dictum, libero id tempor malesuada, erat ex cursus nibh, ac hendrerit massa neque commodo metus. Integer porttitor ante eu varius interdum. Suspendisse quis iaculis erat. Fusce eu nisl id eros tempor posuere. Donec placerat orci orci, ut ultrices neque rutrum in. Nunc dignissim ante et risus rhoncus, vel feugiat mi vestibulum. Aliquam in dictum neque, non vestibulum lorem. Sed imperdiet dolor vitae felis iaculis, id sollicitudin lectus rhoncus. Maecenas ac dolor eget tortor rutrum commodo. Aliquam luctus iaculis mi id semper. Suspendisse sem nisi, convallis at dapibus in, convallis eu neque. Curabitur maximus magna et nulla ullamcorper facilisis.</p> </div> <div class="col-xs-12 col-md-4"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget iaculis lorem. Fusce elementum magna fringilla ipsum bibendum, vitae consectetur ligula interdum. Sed mauris diam, hendrerit eget suscipit vel, luctus at odio. Etiam pellentesque a metus et pharetra. Praesent dictum, libero id tempor malesuada, erat ex cursus nibh, ac hendrerit massa neque commodo metus. Integer porttitor ante eu varius interdum. Suspendisse quis iaculis erat. Fusce eu nisl id eros tempor posuere. Donec placerat orci orci, ut ultrices neque rutrum in. Nunc dignissim ante et risus rhoncus, vel feugiat mi vestibulum. Aliquam in dictum neque, non vestibulum lorem. Sed imperdiet dolor vitae felis iaculis, id sollicitudin lectus rhoncus. Maecenas ac dolor eget tortor rutrum commodo. Aliquam luctus iaculis mi id semper. Suspendisse sem nisi, convallis at dapibus in, convallis eu neque. Curabitur maximus magna et nulla ullamcorper facilisis.</p> </div> </div> </section>
Starting our Application
node server.js
If you click on the about link in the navigation, you will see the about page:
<img class="alignleft size-large wp-image-967" src="/about-1024x516.png" alt="about page" width="600" />