TheLazy.Dev
Portfolio GitHub

Blog

express |handlebars |mustache |pug

Express Templating Cheatsheet (Pug, EJS, Handlebars, Mustache, Liquid)

alexmercedcoder

Alex Merced

Posted on October 20, 2021

Express Templating Cheatsheet (Pug, EJS, Handlebars, Mustache, Liquid)

Intro

Express can be used several different templating engines, most engines will assume by default that all your templates are in a "views" folder. To render a template you'll use the render function in side the response object in your express routes.

res.render("template.extension", {data: [1,2,3,4]})
Enter fullscreen mode Exit fullscreen mode

Render will search for a template file called "template.extension" in the views folder and pass the object to the template engine to use when rendering the template.

LiquidJS

LiquidJS Documentation

LiquidJS is the javascript implementation of popular ruby based Liquid templating system used by Shopify. Here is how to use it in your express apps.

  1. install npm install liquid-express-views
  2. configure the template engine 
// Import express
const express = require("express")
// import path from node standard library
const path = require("path")
// create our application object (and configure liquid templating)
// passing the app object to the l-e-v function first and then saving to the app variable
const app = require("liquid-express-views")(express(), {root: [path.resolve(__dirname, 'views/')]})
Enter fullscreen mode Exit fullscreen mode

*these settings will assume all your templates to be within a "views" folder

Injecting Variables

Use double curly brackets to inject data. Given this call to render.

res.render("template.liquid", {name: "Alex Merced"})
Enter fullscreen mode Exit fullscreen mode

Use the name property in the template like so:

<h1>I am {{name}}</h1>
Enter fullscreen mode Exit fullscreen mode

Looping through an array

Use the for tag to loop over an array of data. Given this call to render.

res.render("template.liquid", {names: ["Alex", "Beth", "Connor"]})
Enter fullscreen mode Exit fullscreen mode

Use the names array in the template like so:

<ul>
  {% for name in names %}
    <li>{{name}}</li>
  {% endfor %}
</ul>
Enter fullscreen mode Exit fullscreen mode

Conditional render

Use the if tag to render html conditionally. Given this call to render.

res.render("template.liquid", {name: "Alex Merced", show: true})
Enter fullscreen mode Exit fullscreen mode

conditional logic would be done like so:

{% if show == true %}
  <h1>{{name}}</h1>
{% else %}
  <h1>Not sure who you've talking about</h1>
{% endif %}
Enter fullscreen mode Exit fullscreen mode

EJS (Embedded Javascript)

EJS Documentation

EJS is a templating language that allows you to write javascript in your templates.

  1. install npm install ejs
  2. ejs works out of the box with express long as your ejs files are in the views folder and have an ejs extension

Injecting Variables

Use <%= %> to inject data. Given this call to render.

res.render("template.ejs", {name: "Alex Merced"})
Enter fullscreen mode Exit fullscreen mode

Use the name property in the template like so:

<h1>I am <%= name %></h1>
Enter fullscreen mode Exit fullscreen mode

Looping through an array

Write a standard js loop with <% %> tags. Given this call to render.

res.render("template.ejs", {names: ["Alex", "Beth", "Connor"]})
Enter fullscreen mode Exit fullscreen mode

Use the names array in the template like so:

<ul>
  <% for (name of names){ %>
    <li><%= name %></li>
  <% } %>
</ul>
Enter fullscreen mode Exit fullscreen mode

Conditional render

Write a standard js if statement with <% %> tags. Given this call to render.

res.render("template.ejs", {name: "Alex Merced", show: true})
Enter fullscreen mode Exit fullscreen mode

conditional logic would be done like so:

<% if (show){ %>
  <h1><%= name %></h1>
<% } else { %>
  <h1>Not sure who you've talking about</h1>
<% } %>
Enter fullscreen mode Exit fullscreen mode

Mustache

Mustache Documentation

  1. Install npm install mustache-express
  2. configure in express 
// We are importing the express library
const express = require("express")

//import mustache-express
const mustache = require('mustache-express')

// We use express to create an application object that represents our server
const server = express()

// We Tell Express to Look for mustache files when we use the render function
// templates are by default looked for in the views folder
server.engine('mustache', mustache()) //Change the view engine
server.set("view engine", "mustache")
Enter fullscreen mode Exit fullscreen mode

Injecting Variables

Use double curly brackets to inject data. Given this call to render.

res.render("template.mustache", {name: "Alex Merced"})
Enter fullscreen mode Exit fullscreen mode

Use the name property in the template like so:

<h1>I am {{name}}</h1>
Enter fullscreen mode Exit fullscreen mode

Looping through an array

Given this call to render.

res.render("template.mustache", {names: ["Alex", "Beth", "Connor"]})
Enter fullscreen mode Exit fullscreen mode

Use the names array in the template like so:

<ul>
  {{#names}}
    <li>{{.}}</li>
  {{/names}}
</ul>
Enter fullscreen mode Exit fullscreen mode

Conditional render

Given this call to render.

res.render("template.mustache", {name: "Alex Merced", show: true})
Enter fullscreen mode Exit fullscreen mode

conditional logic would be done like so:

  {{#show}}
  <h1>{{name}}</h1>
  {{/show}}
Enter fullscreen mode Exit fullscreen mode

Pug

Pug Documentation

  1. install npm install pug
  2. configure in express 
// We are importing the express library
const express = require("express")

// We use express to create an application object that represents our server
const server = express()

// Set the view engine to pug
server.set('view engine', 'pug')
Enter fullscreen mode Exit fullscreen mode

Injecting Variables

Use double curly brackets to inject data. Given this call to render.

res.render("template.pug", {name: "Alex Merced"})
Enter fullscreen mode Exit fullscreen mode

Use the name property in the template like so:

h1 #{name}
Enter fullscreen mode Exit fullscreen mode

Looping through an array

Given this call to render.

res.render("template.pug", {names: ["Alex", "Beth", "Connor"]})
Enter fullscreen mode Exit fullscreen mode

Use the names array in the template like so:

ul
  each name in names
    li= name
Enter fullscreen mode Exit fullscreen mode

Conditional render

Given this call to render.

res.render("template.pug", {name: "Alex Merced", show: true})
Enter fullscreen mode Exit fullscreen mode

conditional logic would be done like so:

if show
  h1 #{name}
else
  h1 don't know who your talking about
Enter fullscreen mode Exit fullscreen mode

Handlebars

Handlebars Documentation

  1. Install npm install express-handlebars
  2. configure in express 
// We are importing the express library
const express = require("express")

//import mustache-express
const handlebars = require('express-handlebars')

// We use express to create an application object that represents our server
const server = express()

// We Tell Express to Look for mustache files when we use the render function
// templates are by default looked for in the views folder
server.engine('handlebars', handlebars()) //Change the view engine
server.set("view engine", "handlebars")
Enter fullscreen mode Exit fullscreen mode

Injecting Variables

Use double curly brackets to inject data. Given this call to render.

res.render("template.handlebars", {name: "Alex Merced"})
Enter fullscreen mode Exit fullscreen mode

Use the name property in the template like so:

<h1>I am {{name}}</h1>
Enter fullscreen mode Exit fullscreen mode

Looping through an array

Given this call to render.

res.render("template.handlebars", {names: ["Alex", "Beth", "Connor"]})
Enter fullscreen mode Exit fullscreen mode

Use the names array in the template like so:

<ul>
  {{#each names}}
    <li>{{this}}</li>
  {{/each}}
</ul>
Enter fullscreen mode Exit fullscreen mode

Conditional render

Given this call to render.

res.render("template.handlebars", {name: "Alex Merced", show: true})
Enter fullscreen mode Exit fullscreen mode

conditional logic would be done like so:

  {{#if show}}
  <h1>{{name}}</h1>
  {{/if}}
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
alexmercedcoder
Alex Merced

Posted on October 20, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Express Templating Cheatsheet (Pug, EJS, Handlebars, Mustache, Liquid)
express Express Templating Cheatsheet (Pug, EJS, Handlebars, Mustache, Liquid)

October 20, 2021