When building web applications with Node.js and Express.js, you often need to generate dynamic HTML pages. This is where template engines like EJS (Embedded JavaScript) and Pug (formerly Jade) come into play. They allow you to create HTML templates with embedded JavaScript code, making it easier to render dynamic content. In this article, we’ll explore three practical examples using these template engines.
In this example, we’ll create a basic Express.js application that uses EJS to render a simple webpage with dynamic data. This is useful when you want to display user information or other dynamic content.
const express = require('express');
const app = express();
const port = 3000;
// Set EJS as the template engine
app.set('view engine', 'ejs');
// Sample data
const user = {
name: 'Taylor',
age: 30,
occupation: 'Writer'
};
// Route to render the EJS template
app.get('/', (req, res) => {
res.render('index', { user });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
npm install ejs.Create a folder named views and add a file named index.ejs with the following content:
<h1>Hello, <%= user.name %>!</h1>
<p>Age: <%= user.age %></p>
<p>Occupation: <%= user.occupation %></p>
When you navigate to http://localhost:3000, you will see a personalized greeting.
Here, we will use Pug to create a webpage that displays a dynamic list of items. Pug’s syntax is more concise compared to EJS, making it a great option when working with complex layouts.
const express = require('express');
const app = express();
const port = 3000;
// Set Pug as the template engine
app.set('view engine', 'pug');
// Sample array of items
const items = ['Apples', 'Bananas', 'Cherries'];
// Route to render the Pug template
app.get('/', (req, res) => {
res.render('index', { items });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
npm install pug.In your views folder, create an index.pug file with the following content:
doctype html
html
head
title Item List
body
h1 Item List
ul
each item in items
li= item
Visit http://localhost:3000 to see the list of items rendered dynamically.
In this example, we’ll create a simple form using EJS that allows users to submit their name. This demonstrates how to handle form submissions and render feedback on the page.
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
// Set EJS as the template engine
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
// Route to display the form
app.get('/', (req, res) => {
res.render('form');
});
// Route to handle form submission
app.post('/submit', (req, res) => {
const name = req.body.name;
res.render('result', { name });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
body-parser by running npm install body-parser.Create two new EJS files in the views folder:
form.ejs:
<h1>Submit Your Name</h1>
<form action="/submit" method="POST">
<input type="text" name="name" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
result.ejs:
<h1>Hello, <%= name %>!</h1>
<a href="/">Go Back</a>
After submitting the form, you will see a greeting with the name you entered.
Using template engines like EJS and Pug with Express.js allows you to create dynamic and interactive web applications easily. These examples provide a solid foundation for rendering templates and handling user input. Happy coding!