Guías Técnicas

Implementación del Motor de Plantillas EJS en Express.js

Motor de Template Engines EJS

EJS (Embedded JavaScript) es un motor de plantillas que permite generar HTML dinámico en aplicaciones web, especialmente con Node.js. Facilita la inserción de código JavaScript en archivos HTML para crear contenido dinámico basado en los datos del servidor.

¿Qué son los Template Engines?

Los Template Engines son herramientas que generan contenido dinámico y personalizado en desarrollo web. Permiten separar el HTML de la lógica del servidor, usando plantillas con variables que se reemplazan con datos antes de mostrar la página al cliente.

¿Cómo se utilizan los Template Engines?

En el desarrollo con Express (un framework de Node.js), los template engines gestionan las vistas de manera eficiente. Permiten insertar datos dinámicos del servidor directamente en el HTML, haciendo las vistas más flexibles y personalizadas para el usuario.

Template Engines para Express

Existen varios motores de plantillas populares para usar con Express. Algunos de los más conocidos incluyen:

Cada uno tiene sus propias características, pero todos permiten generar HTML dinámico de manera sencilla.

Motor de Templates: Definición

Un motor de templates genera HTML dinámico combinando plantillas predefinidas con datos del servidor, permitiendo crear páginas web dinámicas sin mezclar lógica de negocio con contenido estático.

Configuración de EJS

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

// Configurar EJS
app.set('view engine', 'ejs');
app.set('views', './views');

Estructura del Proyecto

bash 
proyecto/
├── views/
│   ├── index.ejs
│   └── perfil.ejs
└── server.js

Envío de Parámetros a Templates

Petición GET

javascript 
// Ruta GET simple
app.get('/', (req, res) => {
res.render('index', { 
    titulo: 'Página Principal',
    usuario: { 
      nombre: 'Juan', 
      edad: 30 
    }
  });
});

// Vista EJS (index.ejs)
<h1><%= titulo %></h1>
<p>Nombre: <%= usuario.nombre %></p>

Petición POST

javascript 
// Configuración para parsear body
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// Ruta POST
app.post('/registro', (req, res) => {
const { nombre, email } = req.body;

// Renderizar vista con datos recibidos
res.render('confirmacion', { 
    nombre, 
    email 
  });
});

Obtención de Parámetros en Express

Parámetros GET

javascript 
// Ruta con parámetros GET
app.get('/usuario', (req, res) => {
// Obtener parámetros de consulta
const id = req.query.id;
const nombre = req.query.nombre;

res.json({ id, nombre });
});

// Ejemplo de URL
// /usuario?id=123&nombre=Juan

Parámetros JSON

javascript 
// Middleware para parsear JSON
app.use(express.json());

// Ruta para manejar solicitudes JSON
app.post('/api/usuarios', (req, res) => {
// Acceder a datos JSON
const { nombre, email, edad } = req.body;

// Procesar datos
const nuevoUsuario = {
  id: Date.now(),
  nombre,
  email,
  edad
};

res.status(201).json(nuevoUsuario);
});

Ejemplo Completo

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

// Configuraciones
app.set('view engine', 'ejs');
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Ruta principal
app.get('/', (req, res) => {
  res.render('index', { 
    titulo: 'Bienvenido',
    usuarios: [
      { id: 1, nombre: 'Ana' },
      { id: 2, nombre: 'Carlos' }
    ]
  });
});

// Ruta de registro
app.post('/registro', (req, res) => {
  const { nombre, email } = req.body;
  res.render('confirmacion', { nombre, email });
});

// Iniciar servidor
app.listen(3000, () => {
console.log('Servidor corriendo');
});
  Ejemplo Completo de Motor de Plantilla EJS

Para comprender cómo implementar el motor de plantillas EJS, te comparto un ejemplo completo en GitHub donde puedes ver el código y la estructura del proyecto.

Además, puedes ver una guía paso a paso en este video de YouTube para entender cómo funciona la implementación.