Node.js : Making HTML template using EJS and Layouts

Thursday 10 May 2018

Node.js : Making HTML template using EJS and Layouts

Posted By: abhishek verma Thursday, May 10, 2018 Leave a Reply
I have used Node.js for multiple applications and prototypes I have to build, and I always wanted to find a very simple application template that would provide a simple starting point when creating new applications. As I could not find something simple and light weighted, I decided to create a simple application template and will now share it with you all. 

For this post, I'll assume you know how to create your initial project either using Node.js Express or in my case, using WebStorm. 

1) Create initial express project using EJS as template engine 

2) Download Twitter Bootstrap and place it in public/lib/bootstrap 

3) Download jQuery and place it in public/lib/jquery 

4) Add local-ejs in order to get support for layouts and hinheritance 

Install ejs-locals
1npm install ejs-locals --save
Use ejs-locals as your app engine in app.js
1var express = require('express');
2var engine = require('ejs-locals');
3...
4
5app.engine('ejs', engine);
6app.set('view engine', 'ejs');
5) Create the basic template 

The layout.ejs is where the basic page layout is defined. It's composed of three main parts : head.ejs, header.ejs and the footer.ejs; and also provides a place for you to add your own content: body.
01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <% include templates/head.ejs%>
05</head>
06
07<body>
08
09<% include templates/header.ejs%>
10
11
12<!-- Insert Body here -->
13<div class="container">
14
15    <div class="starter-template">
16        <%- body %>
17    </div>
18
19</div><!-- /.container -->
20
21<% include templates/footer.ejs%>
22
23</body>
24</html>
When we look into the head.ejs, we see mainly some meta information and the inclusion of CSS and JavaScript libraries. 

01<title><%= title %></title>
02<meta name="viewport" content="width=device-width, initial-scale=1.0">
03<meta name="description" content="nodeJS Template">
04<meta name="author" content="Luciano Resende">
05
06<!-- styles -->
07<link href="/lib/boostrap/css/bootstrap.css"rel="stylesheet">
08<link href="/stylesheets/style.css" rel="stylesheet">
09
10...
The header.ejs is where the top navigation bar, where the application title, and menu entries are defined:
01<div class="navbar navbar-inverse navbar-fixed-top">
02    <div class="container">
03        <div class="navbar-header">
04            <button type="button" data-toggle="collapse"data-target=".navbar-collapse" class="navbar-toggle"><span
05                        class="icon-bar"></span><spanclass="icon-bar"></span><span class="icon-bar"></span></button>
06            <a href="#" class="navbar-brand">Application</a></div>
07        <div class="collapse navbar-collapse">
08            <ul class="nav navbar-nav">
09                <li class="active"><a href="/">Home</a></li>
10                <li><a href="/users">Users</a></li>
11            </ul>
12        </div>
13    </div>
14</div>
And the footer.ejs defines copyright information or any other information that you want present on every page footer:
1<div class="footer">
2    <div class="container">
3        <p class="text-center text-muted">© Copyright Luciano Resende - 2014</p>
4    </div>
5</div>
Now, to build your pages, you would include the layout on the top of the page, and start building your content like the sample below.
1<% layout('layout') -%>
2
3<h1>Bootstrap starter template</h1>
4<p class="lead">Page content goes here.</p>
Now you can run your app using :
1node bin/www
And the ui looks just like the sample Twitter Bootstrap sample page
Hopefully this can help you get started with new applications more quickly. 

The code is also available in this github repository : node-app-template. 

0 comments: