Node.js : Building HTML site template using EJS and Layouts

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

npm install ejs-locals --save

Use ejs-locals as your app engine in app.js

var express = require('express');
var engine = require('ejs-locals');
...

app.engine('ejs', engine);
app.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. When we look into the head.ejs, we see mainly some meta information and the inclusion of CSS and JavaScript libraries.

The header.ejs is where the top navigation bar, where the application title, and menu entries are defined: And the footer.ejs defines copyright information or any other information that you want present on every page footer: 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. Now you can run your app using : 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.