Hello. In this tutorial, we will understand how to a template engine in a simple express.js application.
1. Introduction
The template engine in the express js application helps to use the static template files in the applications. At runtime, it replaces the variable in the template file with the actual values. Some of the commonly used popular template engines are – Jade, mustache, dust, atpl, etc. In this tutorial, we will use the jade template engine for implementation.
1.1 Setting up Node.js
To set up Node.js on windows you will need to download the installer from this link. Click on the installer (also include the NPM package manager) for your platform and run the installer to start with the Node.js setup wizard. Follow the wizard steps and click on Finish when it is done. If everything goes well you can navigate to the command prompt to verify if the installation was successful as shown in Fig. 1.
2. Express.js Template Engine
To set up the application, we will need to navigate to a path where our project will reside and I will be using Visual Studio Code as my preferred IDE.
Let us take a look at the code structure.
2.1 Setting up dependencies
Navigate to the project directory and run npm init -y to create a package.json file. This file holds the metadata relevant to the project and is used for managing the project dependencies, script, version, etc. Replace the generated file with the code given below –
package.json
{
"name": "expressjs-templateengine",
"version": "1.0.0",
"description": "Jade template engine in node.js application using express.js",
"main": "index.js",
"scripts": {
"dev": "nodemon index.js",
"start": "node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"jade",
"node",
"express",
"expressjs-templateengine",
"templateengine"
],
"author": "geeks",
"license": "MIT",
"dependencies": {
"express": "^4.17.3",
"jade": "^1.11.0"
},
"devDependencies": {
"nodemon": "^2.0.15"
}
}
Once the file is replaced trigger the below npm command in the terminal window to download the different packages required for this tutorial.
Downloading dependencies
npm install
2.2 Creating templates
By default, expressjs searches for all the view pages in the views folder under the project root. However, in this tutorial, we will change this default behavior by moving all the view pages to the pages folder.
2.2.1 Welcome page
Create a file named – welcome.jade responsible to show the welcome page to the user when the / endpoint is hit in the browser.
welcome.jade
doctype html
html
head
title Jade Page
body
h3 This page is produced by Jade engine
p Hello world
2.2.2 Employees page
Create a file named – employees.jade responsible to show the employee list by fetching the data from the mock sql table. The page will be shown to the user when the /sql endpoint is hit in the browser.
employees.jade
doctype html
html
head
title Employees
body
h3 List using Jade engine
ul
each item in employeeList
li=item.name
2.3 Setting up the implementation file
Create a file responsible to describe the implementation. The file will be responsible to perform three different things –
- Expose the application endpoints
- Override the default folder name for the views
- Setting the view engine to jade
index.js
const express = require("express");
// setting up express server
const app = express();
// setting the view folder for the jade files
app.set("views", "pages");
// setting app engine
app.set("view engine", "jade");
// -- application endpoints --
// http://localhost:3005
app.get("/", (req, res) => {
res.render("welcome");
});
// http://localhost:3005/sql
app.get("/sql", (req, res) => {
const records = [
{
id: "101",
name: "Jane Doe"
},
{
id: "102",
name: "Neil Irani"
},
{
id: "103",
name: "Tom Hanks"
}
];
res.render("employees", { employeeList: records });
});
// driver code
const SERVER_PORT = 3005;
app.listen(SERVER_PORT, () => {
console.log(`Service endpoint = http://localhost:${SERVER_PORT}`);
});
3. Run the Application
To run the application navigate to the project directory and enter the following command as shown below in the terminal.
Run command
$ npm run dev
If everything goes well the application will be started successfully at the service endpoint – http://localhost:3005
4. Application endpoints
The application exposes the below endpoints that you can explore in the browser to understand the jade implementation.
Application endpoints
// application endpoint // http get - http://localhost:3005 // http get - http://localhost:3005/sql
That is all for this tutorial and I hope the article served you with whatever you were looking for. Happy Learning and do not forget to share!
5. Summary
In this tutorial, we saw the jade implementation in an expressjs application. You can download the source code from the Downloads section.
6. Download the Project
This was a tutorial to implement jade in a nodejs and express application.
You can download the full source code of this example here: Express.js Template Engine
