Templating Engines

JavaScript 2

In this section, we’ll explore how to use templating engines with Express to render dynamic HTML content. Templating engines allow you to create HTML pages with embedded JavaScript logic, making it easier to generate dynamic content based on your application’s data.

Introduction to Templating Engines

Templating engines are used to create HTML templates that can include dynamic content. They help separate your application’s logic from its presentation. Popular templating engines for Express include Pug, EJS, and Handlebars. In this section, we’ll focus on using Pug.

NOTE: We are learning about templating engines to generate front-end code for the sake of learning. In a real-world application, you would likely use a front-end framework like React, Angular, or Vue.js to handle dynamic content.

Setting Up Pug with Express

Create a new basic Express application:
bash
```
	npm init -y
	npm install express
```
Install Pug:
bash
```
	npm install pug
```

Configure Express to Use Pug:

Create a app.js file and add the following code:

javascript

	// Importing the Express module
	const express = require('express');
	const app = express();
	const port = 3000;
	
	// Setting the view engine to 'pug'
	app.set('view engine', 'pug');
	
	// Setting the directory for the views (Pug templates)
	app.set('views', './views');
	
	// Handling GET request at the root URL
	app.get('/', (req, res) => {
	  res.render('index', { title: 'Home', message: 'Hello, World!' });
	});
	
	app.listen(port, () => {
	  console.log(`Server running at http://localhost:${port}/`);
	});

Create a Pug Template: Create a directory named views and a file named index.pug inside it:

txt

	//- index.pug
	doctype html
	html
	    head
	        title= title
	    body
	        h1= message
	        p Welcome to my Pug template!

Run Your Application:
bash
```
	node app.js
```
Open a browser and go to http://localhost:3000/ to see your rendered HTML page.

Rendering Dynamic Content

You can pass data from your Express route to your Pug templates to render dynamic content.

Example: Rendering a list of items:

javascript

	// Importing the Express module
	const express = require('express');
	const app = express();
	const port = 3000;
	
	// Setting the view engine to 'pug'
	app.set('view engine', 'pug');
	
	// Setting the directory for the views (Pug templates)
	app.set('views', './views');
	
	// Handling GET request at the root URL
	app.get('/', (req, res) => {
	  const items = ['Item 1', 'Item 2', 'Item 3'];
	  res.render('index', { title: 'Home', message: 'Hello, World!', items });
	});
	
	app.listen(port, () => {
	  console.log(`Server running at http://localhost:${port}/`);
	});

Update index.pug to render the list:

txt

	//- index.pug
	doctype html
	html
	    head
	        title= title
	    body
	        h1= message
	        p Welcome to my Pug template!
	        ul
	            each item in items
	                li= item

Using Layouts and Partials

Layouts and partials help you reuse common parts of your templates, such as headers and footers.

Create a Layout Template: Create a file named layout.pug inside the views directory:

txt

	//- layout.pug
	doctype html
	html
	    head
	        title= title
	    body
	        block content

Extend the Layout in Your Template: Update index.pug to extend the layout:

txt

	//- index.pug
	extends layout
	
	block content
	    h1= message
	    p Welcome to my Pug template!
	    ul
	        each item in items
	            li= item

Create a Partial Template: Create a file named header.pug inside the views directory:
txt
```
	//- header.pug
	header
	    h1= title
```

Include the Partial in Your Layout: Update layout.pug to include the header:

txt

	//- layout.pug
	doctype html
	html
	    head
	        title= title
	    body
	        include header
	        block content