4- Template Engines

mayo 27, 2025

Introducción a los Template Engines en Node.js - Pug y EJS

¿Qué son los Template Engines en Node.js?

Estructura del Proyecto

Antes de comenzar, revisemos la organización del proyecto:

BIENESRAICES_MVC/
├── controllers/
├── node_modules/
├── public/
│   ├── css/
│   │   ├── app.css
│   │   └── tailwind.css
│   ├── img/
│   └── js/
├── routes/
├── views/
│   ├── auth/
│   │   ├── login.pug
│   │   └── registro.pug
│   └── layout/
│       └── index.pug
├── package.json
└── tailwind.config.cjs

Los motores de plantillas (Template Engines) son herramientas fundamentales en el desarrollo con Node.js que nos permiten generar HTML dinámico de manera eficiente. En este post exploraremos dos de los más populares: EJS y Pug.

Configurando EJS (Embedded JavaScript)

Para comenzar con EJS, primero debemos instalarlo:

npm install ejs

Luego, en nuestro archivo principal (generalmente index.js o app.js), configuramos EJS como nuestro motor de vistas:

// Configuración del motor de plantillas EJS
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

Renderizando vistas con EJS

Para renderizar una vista y pasarle variables:

res.render("index", {titulo: "mi titulo dinámico"});

En nuestro archivo index.ejs (dentro de la carpeta views), podemos usar esas variables:

<h2><%= titulo %></h2>

Ejemplo completo con EJS

Supongamos que tenemos una página de servicios (views/servicios.ejs):

<body>
  <h1><%- tituloServicios %></h1>
</body>

Y en nuestro archivo de rutas:

app.get('/servicios', (req, res) => {
  res.render("servicios", {tituloServicios: "Mensaje"})
});

Incluyendo partials en EJS

EJS nos permite modularizar nuestras vistas usando includes:

<% include("template/cabecera") %>

Configurando Pug (antes Jade)

Para usar Pug, primero lo instalamos:

npm install pug

En nuestro package.json veremos:

"dependencies": {
  "pug": "2.5.16"
}

Configuración básica de Pug

En nuestro archivo principal:

// Habilitamos Pug
app.set('view engine', 'pug');
app.set('views', './views');

Ejemplo de ruta con Pug

Podemos organizar nuestras rutas modularmente. Por ejemplo, para rutas de autenticación:

import express from "express";
const router = express.Router();

router.get('/login', (req, res) => {
  res.render('auth/login');
});

export default router;

Y en nuestro archivo principal:

app.use('/auth', usuarioRoutes);

Característica única de Pug

Pug utiliza indentación (sangría) para definir la estructura HTML, lo que lo hace muy conciso:

doctype html
html
  head
    title Mi página
  body
    h1 Hola mundo
    p Bienvenido a mi sitio

¿Qué es app.set()?

En Express.js, app.set() es un método que nos permite asignar configuraciones a nuestra aplicación. En el contexto de los template engines, lo usamos principalmente para:

app.set('view engine', 'ejs/pug'): Define qué motor de plantillas usará nuestra aplicación.
app.set('views', './views'): Especifica el directorio donde se encuentran nuestras vistas.

Estas configuraciones son esenciales para que Express sepa cómo procesar y renderizar nuestras plantillas correctamente.

Conclusión

Tanto EJS como Pug son excelentes opciones para trabajar con plantillas en Node.js. EJS mantiene una sintaxis más similar a HTML tradicional, mientras que Pug ofrece una sintaxis más minimalista y elegante. La elección entre uno u otro dependerá de tus preferencias personales y los requerimientos de tu proyecto.

Buscar este blog

NOSDE-BIENESRAICES