Shamaayil Ahmed
Setup Template Engines with Express

Setup Template Engines with Express

EJS template/view engine with Express server apps

Shamaayil Ahmed's photo
Shamaayil Ahmed
·

3 min read

Let's add dynamic data within the static views/html-pages for seamless user experience.

TL;DR

We've been talking about static views/pages to be parsed and routed by the express server. Template processor (also known as a template engine or template parser) is the concept of combining static html templates with a data model/database to produce desired documents.

Template Engine

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values(from database), and transforms the template into an HTML file sent to the client. This approach gives the seamless UX with the dynamic html pages created by template engines.

Included as a part of a web template system or application framework, and works as a preprocessor.

There are many template engines available here we're gonna use EJS(Embedded JavaScript) library.

Getting started

Install the latest version of EJS library to your local dependency

npm install ejs

EJS Templates/Views

So let's get back to action, here's what we're going to do down below in code;

  • Registering the view engine
app.set('view engine', 'ejs')
  • Rendering the views for specific routes, default look to for EJS is the views folder in root directory
app.get('/', (req, res) => {
  res.render('index')  /*relative path set as views*/
})
  • Pass dynamic data to the views
app.get('/', (req, res) => {
  res.render('index', { title: 'HOME'})
})
  • Use partials for repetitive blocks of code within the view
<%- include('./partials/head.ejs')%> /*includes the content within head tag*/

Every single line in ejs start with:

<% %>
<%= %> /*prints the value*/
<%- %>   /*includes piece of code*/

Folder structure

EJS__view_engine  
|     
|__views
|     |
|     |_partials
|     |     |
|     |     |_head.ejs
|     |     
|     |_index.ejs
|     |
|     |_404.ejs
|
|__server.js

Complete source code

views/partials/head.ejs

Reusable chunk of code to be assigned in partials, as such head is to be included in all views/pages.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SH.AH WEBDEV | <%= title%> </title> /*title is a variable whose value is assigned from server*/
</head>

views/index.ejs

<!DOCTYPE html>
<html lang="en">

<%- include('./partials/head.ejs')%>  /*instead of repeating the head tag we include the head.ejs partial*/

  <body>
      <h1>Welcome to my home page</h1>
      <% var value=10 %> /*we can add javascript with the ejs syntax for any logic building*/
  </body>

</html>

views/404.ejs

<!DOCTYPE html>
<html lang="en">

<%- include('./partials/head.ejs')%>

  <body>
        <h1>OOPS...</h1>
  </body>

</html>

server.js

const express = require('express');

const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { title: 'HOME' });  /*so HOME is to be sent as dynamic data to the index view*/
})

// 404
app.use((req, res) => {
  res.status(404).render('404');
})

Major Takeaway

Template/View engines are used for generating dynamic html pages by assigning values to their template/view, EJS is one such are goes perfectly with express.

JavaScriptExpressWeb DevelopmentHashnodeDeveloper