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]})
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 is the javascript implementation of popular ruby based Liquid templating system used by Shopify. Here is how to use it in your express apps.
- install
npm install liquid-express-views - 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/')]})
*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"})
Use the name property in the template like so:
<h1>I am {{name}}</h1>
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"]})
Use the names array in the template like so:
<ul>
{% for name in names %}
<li>{{name}}</li>
{% endfor %}
</ul>
Conditional render
Use the if tag to render html conditionally. Given this call to render.
res.render("template.liquid", {name: "Alex Merced", show: true})
conditional logic would be done like so:
{% if show == true %}
<h1>{{name}}</h1>
{% else %}
<h1>Not sure who you've talking about</h1>
{% endif %}
EJS (Embedded Javascript)
EJS is a templating language that allows you to write javascript in your templates.
- install
npm install ejs - 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"})
Use the name property in the template like so:
<h1>I am <%= name %></h1>
Looping through an array
Write a standard js loop with <% %> tags. Given this call to render.
res.render("template.ejs", {names: ["Alex", "Beth", "Connor"]})
Use the names array in the template like so:
<ul>
<% for (name of names){ %>
<li><%= name %></li>
<% } %>
</ul>
Conditional render
Write a standard js if statement with <% %> tags. Given this call to render.
res.render("template.ejs", {name: "Alex Merced", show: true})
conditional logic would be done like so:
<% if (show){ %>
<h1><%= name %></h1>
<% } else { %>
<h1>Not sure who you've talking about</h1>
<% } %>
Mustache
- Install
npm install mustache-express - 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")
Injecting Variables
Use double curly brackets to inject data. Given this call to render.
res.render("template.mustache", {name: "Alex Merced"})
Use the name property in the template like so:
<h1>I am {{name}}</h1>
Looping through an array
Given this call to render.
res.render("template.mustache", {names: ["Alex", "Beth", "Connor"]})
Use the names array in the template like so:
<ul>
{{#names}}
<li>{{.}}</li>
{{/names}}
</ul>
Conditional render
Given this call to render.
res.render("template.mustache", {name: "Alex Merced", show: true})
conditional logic would be done like so:
{{#show}}
<h1>{{name}}</h1>
{{/show}}
Pug
- install
npm install pug - 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')
Injecting Variables
Use double curly brackets to inject data. Given this call to render.
res.render("template.pug", {name: "Alex Merced"})
Use the name property in the template like so:
h1 #{name}
Looping through an array
Given this call to render.
res.render("template.pug", {names: ["Alex", "Beth", "Connor"]})
Use the names array in the template like so:
ul
each name in names
li= name
Conditional render
Given this call to render.
res.render("template.pug", {name: "Alex Merced", show: true})
conditional logic would be done like so:
if show
h1 #{name}
else
h1 don't know who your talking about
Handlebars
- Install
npm install express-handlebars - 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")
Injecting Variables
Use double curly brackets to inject data. Given this call to render.
res.render("template.handlebars", {name: "Alex Merced"})
Use the name property in the template like so:
<h1>I am {{name}}</h1>
Looping through an array
Given this call to render.
res.render("template.handlebars", {names: ["Alex", "Beth", "Connor"]})
Use the names array in the template like so:
<ul>
{{#each names}}
<li>{{this}}</li>
{{/each}}
</ul>
Conditional render
Given this call to render.
res.render("template.handlebars", {name: "Alex Merced", show: true})
conditional logic would be done like so:
{{#if show}}
<h1>{{name}}</h1>
{{/if}}
Oldest comments (1)
❤