Template Engines (EJS & Pug) in Node.js

Welcome back, dear crafter! Today, we'll delve into the world of Template Engines using two popular ones: EJS (Embedded JavaScript Templates) and Pug (formerly known as Jade). Let's get started!

🎯 Understanding Template Engines

Template engines are tools that help to separate the HTML layout from the application's logic in a web development project. They enable developers to write HTML templates that can be dynamically rendered using JavaScript, making the process more efficient and maintainable.

📝 Setting Up the Project

First, let's create a new Node.js project:

bash

mkdir my-template-project
cd my-template-project
npm init -y

Now, to install EJS, run:

bash

npm install ejs

For Pug, run:

bash

npm install pug

💡 Pro Tip:

You can install both at once using the following command:

bash

npm install ejs pug

📝 EJS Basics

Creating EJS Templates

Create a new file named index.ejs in a views folder:

bash

mkdir views
touch views/index.ejs

Let's add a simple EJS template:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My EJS Project</title>
</head>
<body>
  <h1>Welcome to My EJS Project!</h1>
</body>
</html>

Rendering EJS Templates

To render the EJS template, create an app.js file with the following content:

javascript

const express = require('express');
const app = express();
const ejs = require('ejs');

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

app.get('/', (req, res) => {
  res.render('index', { message: 'Hello, EJS!' });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Now, start the server:

bash

node app.js

Visit http://localhost:3000 in your browser to see the output.

💡 Pro Tip:

You can access variables passed to the template using <%= variableName %>.

📝 Pug Basics

Creating Pug Templates

Create a new file named index.pug in the views folder:

bash

mkdir views
touch views/index.pug

Let's add a simple Pug template:

pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title My Pug Project
  body
    h1 Welcome to My Pug Project!

Rendering Pug Templates

To render the Pug template, update the app.js file:

javascript

const express = require('express');
const app = express();
const pug = require('pug');

app.engine('pug', pug.__express);
app.set('view engine', 'pug');
app.set('views', __dirname + '/views');

app.get('/', (req, res) => {
  const viewHTML = pug.renderFile('./views/index.pug', { message: 'Hello, Pug!' });
  res.send(viewHTML);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Now, start the server:

bash

node app.js

Visit http://localhost:3000 in your browser to see the output.

💡 Pro Tip:

You can access variables passed to the template using = variableName =.

🎯 Comparing EJS and Pug

Both EJS and Pug have their unique features. EJS is more HTML-like and easier for beginners, while Pug is more concise and efficient, making it a popular choice among experienced developers.

📝 Quiz Time

Happy learning, and remember to keep coding! 🚀💻

This is just the beginning of our journey with Template Engines in Node.js. In the next lessons, we will dive deeper into the features of EJS and Pug, and explore how to use them in real-world projects. Stay tuned! 🎉🎓