EJS in Node JS | EJS Template Engine Tutorial for Express JS

EJS
Features
Configure
Add data
If
Include
forEach
cache

What is EJS ?

EJS stands for Embedded JavaScript is a Templating Language. EJS is very simple, light and fast. It allow us to create HTML Markup with Plain JavaScript.

EJS was founded in Feb 2011 and is licensed under Apache License, version 2.0. EJS is the Top most downloaded template engine on npm with approx 6,115,876 downloads per week.

EJS is very light weight, approx 119kb unpacked with zero dependencies.

Install EJS

npm i ejs

EJS Features

Very Simple Syntax
Use Plain JavaScript
Very Fast Compilation and Execution
Compiles with Express View system
Caching for template and intermediate JavaScript
Includes feature available
Easy Debugging

Configure EJS

EJS Configuration is very easy. Build a index.ejs file for static html page in views folder in src folder of root directory, i.e nodeapp.

EJS Directory Structure


    nodeapp/
    ├── package.json
    ├── package-lock.json
    ├── src/
    │   ├── assets/
    │   │     ├─── style.css
    │   │     └─── views/
    │   │           ├─── index.ejs
    │   │           ├─── header.ejs
    │   │           └─── footer.ejs 
    │   │       
    │   └─── server.js
    └── node_modules/

server.js


const express=require("express");
const path=require("path");
const ejs=require("ejs");
const app=express();

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.use(express.static(path.resolve(__dirname,'assets')));

app.get("/",(req,res)=>{
    res.render('index',{});
});

app.listen(3000,()=>{
    console.log(`express server running on 3000`);
});

node src/server.js

Now open 127.0.0.1:3000 is a browser tab to view index page.

Add Data in index.ejs

To bind data in index.ejs file, we can use <%= %> template literals. Inside template literals, i.e. <%= %>, we can pass any datatype.

/*index.ejs*/


    <h2>Name is <%= name %> and id is <%= id %> </h2>

server.js


    res.render('index',{name:"avinash",id:212});

If condition

If Condition in EJS is used to test variable, and then print its property.

/*index.ejs*/


    <% if (user) { %>
        <p><%= user.name %></h2>
        <p><%= user.id %></h2>
    <% } %>

server.js


    res.render('index',{user:{name:'avinash',id:212}});

include

include function is used to include layouts, like header or footer in existing static page.

/*index.ejs*/


    <%- include('header'); %>
    <div class="main">
        <h2>Main Content</h2>
    </div>
    <%- include('footer'); %>

/*header.ejs*/


    <header class="header">
        <h1>Header</h1>
    </header>

/*footer.ejs*/


    <footer class="footer">
        <p>Footer</p>
    </footer>

server.js


    res.render('index',{});

forEach

forEach loop is used to traversal all data inside an array list.

/*index.ejs*/


    <div class="data">
        <h2>Data from Array</h2>
        <ol>
            <% month.forEach(function(name) { %>
                <li><%= name %></li>
            <% }); %>
        </ol>
    </div>

server.js


    res.render('index',{month:['jan','feb','mar']});

Cache

EJS also supports caching by using LRU. The LRU Cache will cache intermediate JavaScript functions used to render template.

Install lru-cache

npm i lru-cache

Integrate LRU Cache in EJS

server.js


const express=require("express");
const path=require("path");
const ejs=require("ejs");
const LRU = require('lru-cache');
ejs.cache =new LRU(100);     
    /* LRU cache with 100-item limit */
const app=express(); 
   
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.use(express.static(path.resolve(__dirname,'assets')));

app.get("/",(req,res)=>{
    res.render('index',{});
});


app.listen(3000,()=>{
    console.log("express server running on ", 3000)
});

To remove cache, use ejs.clearCache

For different limit, use ejs.cache=new LRU(300).