Shoulder.dev
Templates in the context of web development refer to pre-defined structures used to generate dynamic content for web pages. Express.js, a popular Node.js framework, supports various templating engines to simplify the process of creating dynamic web pages. In this explanation, we will cover two commonly used templating engines with Express.js: EJS (Embedded JavaScript Templates) and Pug (previously known as Jade).
- EJS (Embedded JavaScript Templates):
EJS is a templating engine that allows you to embed JavaScript code directly into HTML templates. To use EJS with Express.js, follow these steps:
a. Install EJS: First, you need to install EJS as a dependency in your Express.js application. Run the following command in your terminal:
npm install ejs express --save
b. Create a views folder: Create a new folder named “views” in your project directory to store your EJS templates.
c. Create an EJS template: Create a new file named “index.ejs” inside the “views” folder and add the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to our website!</p>
</body>
</html>
d. Update your Express.js server: Update your Express.js server file (index.js or app.js) to use EJS as the templating engine:
const express = require('express');
const app = express();
const ejs = require('ejs');
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', (req, res) => {
res.render('index', { title: 'Home' });
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
- Pug (Jade):
Pug (previously known as Jade) is a templating engine that allows you to write clean, expressive HTML in a more efficient way. To use Pug with Express.js, follow these steps:
a. Install Pug: First, you need to install Pug as a dependency in your Express.js application. Run the following command in your terminal:
npm install express pug --save
b. Create a views folder: Create a new folder named “views” in your project directory to store your Pug templates.
c. Create a Pug template: Create a new file named “index.pug” inside the “views” folder and add the following content:
doctype html
html
head
title #{title}
body
h1 #{title}
p Welcome to our website!
d. Update your Express.js server: Update your Express.js server file (index.js or app.js) to use Pug as the templating engine:
const express = require('express');
const pug = require('pug');
const app = express();
app.set('view engine', 'pug');
app.use(express.static('public'));
app.get('/', (req, res) => {
const options = { title: 'Home' };
res.render('index', options);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
In conclusion, both EJS and Pug are powerful templating engines that can be used with Express.js to create dynamic web pages. EJS allows you to embed JavaScript code directly into HTML templates, while Pug offers a more efficient way to write clean, expressive HTML. Choose the one that best fits your project requirements.