What are template engines?
Introduction
Template engines are used when you want to rapidly build web applications that are split into different components. Templates also enable fast rendering of the server-side data that needs to be passed to the application.
For example, you might want to have components such as body, navigation, footer, dashboard, etc.
Popular template engines
Template engines are mostly used for server-side applications that are run on only one server and are not built as APIs.
The popular ones include Ejs, Jade, Pug, Mustache, HandlebarsJS,
How template engines work
When you build a server-side application with a template engine, the template engine replaces the variables in a template file with actual values, and displays this value to the client. This makes it easier to quickly build our application.
Example with expressJS and ejs template engine
For a server-side application written with NodeJS runtime, you can use a template engine.
The following steps demonstrate how template engines work using expressJs and the ejs template engine. The example given below renders a user’s data on the web page.
Step 1: Installing express and the ejs template engine
The following command installs the ejs template engine and the express framework:
npm install express ejs
Step 2: Setting up the view engine
const express = require("express")const app = express();// Set the View Engine or Template Engineapp.set('view engine', 'ejs');app.listen(3000)
In the code above, we created our express application. The application listens on port 3000.
This line of code: app.set('view engine', 'ejs'), tells our express application that we want to use EJS as our template engine.
Step 3: Setting up the view folder
Create a folder called “view”.
The view folder should contain our templates. One of these templates is index.ejs, which will generate our front page. The second template is user.ejs, which will be used to pass user data from the server-side to be immediately rendered on the webpage.
index.js
>view
index.ejs
user.ejs
Step 4: Setting up the routes
Let’s create the
Please note the
res.render()method below. This is how you render a template inexpressJS.
app.get('/', function (req, res) {res.render("index");})app.get("/user", function(req,res){const user = {name: "Theodore Kelechukwu O.",stack: "MERN",email: "theodoreonyejiaku@gmail.com",hubby: ["singing", "playing guitar", "reading", "philosoph"]}res.render("user", {user});})
As we have seen, the default route “\”, when accessed, displays or renders the index.ejs page. Meanwhile, the “\user” renders the user.ejs page.
We passed the user object to the render object so as to pass the user properties to the web page and render it.
Step 5: Templating our view files
Now that we have passed user data from server-side, we need to display it right away on our frontend or webpage.
<html><head><title>This is the title</title></head><body><h1>Welcome to User Details</h1><p><b>Name:</b> <%= user.name %></p><p><b>Email:</b> <%= user.email %></p><p><b>Stack:</b> <%= user.stack %></p><u><b>Hubbies</b></u><% user.hubby.forEach(hubby =>{ %><li><%= hubby %></li><% })%></body></html>
Note the <%= variable %> pattern of displaying values. That is the way it is used in ejs. Also notice the user.forEach(); this is to show how powerful template engines can be.
Live code
- You can view the live app here: live code.
- You can view the full source codes here: source codes.
Conclusion
Thanks for reading. I hope you now have a better understanding of template engines. Personally, I have used Express Handlebars and EJS, but I prefer EJS.
