Reusable partial EJS-templates in Express


EJS is a Express (it is a simple Nodejs framework for developing web apps with multiple routes) templating system. Template system allow us to pass values from JavaScript to Frontend. For example you have a JS which populate price list and want show in front end ( as HTML). It can be done with templating system. It is similar to Ninja template in Python – Flask.

In Ninja templates can be derived from a base template, EJS don’t have such thing , instead we can split the reusable part of the template into partial template which is also have .ejs extension.

We can place them in a separate folder or place ‘_’ before the name to identify, it is an notion not a rule and up to you which one to follow.

EJS Template

In our example we have New Post form template as follows

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>Minimal Blog Engine</title>
       <meta name="description" content="">
       <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
   </head>
   <body>
 
  <div class="container">
  <h1 class="mb-4">New Post</h1>
 
  <form action="/posts/" method="POST">
  <%- include('_form_fields.ejs') %>    
  </form>
  </div>
       
   </body>
</html>

The in the include tell the template to render the HTML

Partial template

In the above EJS template the <% include %> statement call a partial template. Let’s create it with few input fields.

<div class="form-group">
<label for="title">Title</label>
<input type="text" required name="title" id="title" class="form-control" ">
</div>
<div class="form-group">
<label for="excerpt">Excerpt</label>
<textarea type="text" name="excerpt" id="excerpt" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="Markdown">Markdown</label>
<textarea required rows="5" cols="" type="text" name="markdown" id="markdown" class="form-control"> </textarea>
</div>
<a href="/" class="btn btn-default">Cancel</a>
<button type="submit" class="btn btn-primary">Save</button>

_form_fields template only define necessary part of form. It can be used with any form which require those fields using the Include statement . So the reusability purpose is served .

Todo : Try to move the head section to a partial template

You may also like the following express posts

How to export multiple components in Reactjs - How to render export multiple components in React
How to create ant row design for Reactjs - Quickly create a row design using Ant Design customize UI for React component
Ant layout for Reactjs apps - How to create a app layout with Ant Design UI Kit in Reactjs
How to render child components in Reactjs - How to render child components in React
How to add element to mongoose object array in Nodejs - How to add element to a mongodb object array
How to auto create tables based on sequelize models - Auto create table based on sequelize models
How to resolve sequelize-JSON.parse error in Node - How to resolve JSON.Parse error in sequelize
Create REST-API using sequelize -MariaDB ORM in Nodejs - How to create REST-API using sequelize ORM for MariaDB in Node-Expressjs
How to interact with input in Reactjs - How to handle state and event of input element in React apps
Create REST-API using sequelize-Mysql in Nodejs - How to create REST-API using sequelize-MySQL ORM in Node-Expressjs

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.