8-Template Engines

¿Qué es un Motor de Plantillas?

  5-EXPRESS
           |
          V
           |
          V
 7-express.static
           |
          V
8-Motor de plantilla

tu-proyecto/
├── public/           # Carpeta para archivos estáticos
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── script.js
│   └── images/
│       └── logo.png
├── index.ejs         # Plantilla EJS (en raíz)
├── app.js            # Servidor Express
└── package.json      # Dependencias

Un motor de plantillas es una herramienta que permite generar contenido HTML (u otros formatos) de manera dinámica, insertando datos en estructuras predefinidas. Esto facilita:


La función app.set() en Express se usa para asignar configuraciones globales a la aplicación. En el caso de view engine, está configurando el sistema de plantillas.

Parámetros:

  1. Primer parámetro ('view engine'):

    • Es una clave de configuración predefinida por Express.

    • Su único propósito es indicar a Express qué motor de plantillas usar por defecto cuando se llama a res.render().

    • No es modificable — siempre debe ser el string 'view engine'.

  2. Segundo parámetro ('ejs'):

    • Es el nombre del paquete del motor de plantillas instalado (en este caso, el paquete ejs).

  3. Configura Express para usar EJS como motor de plantillas. Esto significa que:

    • Los archivos con extensión .ejs se procesarán automáticamente.

    • Podrás usar sintaxis EJS (<% %>, <%= %>, etc.) en tus plantillas.

    • Cuando llames res.render('archivo'), Express buscará archivo.ejs.

  4. Ejemplo práctico:

    javascript
    Copy
    Download
    res.render('index'); // Buscará "index.ejs" y lo renderizará como HTML

app.set()

  • Función: Establece configuraciones en Express.

  • Primer parámetro ('views'):

    • Es una clave predefinida de Express (como 'view engine').

    • Indica que estás configurando la ruta de la carpeta de plantillas.

    • ¡Debe ser exactamente 'views'! (Express lo espera así).

  • Segundo parámetro (path.join(__dirname)):

    • Define la ruta absoluta donde están las plantillas.

    • Usa path.join() y __dirname para garantizar compatibilidad entre sistemas operativos (Windows/macOS/Linux).

La diferencia clave: 'views' vs. el nombre real de la carpeta

Cuando usas:

javascript
Copy
Download
app.set('views', path.join(__dirname));

  • 'views' es solo el nombre de la configuración en Express (no el nombre de la carpeta).

  • path.join(__dirname) define que las plantillas están directamente en la raíz del proyecto (sin carpeta views).

Estructura resultante (correcta):

Copy
Download
/home/usuario/proyecto/
├── app.js         # Archivo principal
├── index.ejs      # Plantilla EJS (en raíz)
└── public/        # (Opcional) Carpeta de archivos estáticos
    ├── css/
    └── js/

¿Por qué funciona así?

  1. Lógica de Express:

    • app.set('views', ruta) solo dice "busca plantillas en esta ubicación".

    • No crea automáticamente una carpeta llamada views.

  2. En tu código:

    javascript
    Copy
    Download
    app.set('views', path.join(__dirname)); // Apunta a /home/usuario/proyecto/
res.render('index'); // Buscará /home/usuario/proyecto/index.ejs

1. Crear una carpeta personalizada para plantillas

Primero, crea una carpeta en tu proyecto (ej: templates, plantillas, pages).
Ejemplo de estructura:

Copy
Download
mi-proyecto/
├── app.js
├── templates/       # ← Carpeta personalizada para .ejs
│   ├── index.ejs
│   └── about.ejs
└── package.json

🔧 2. Configurar Express para usar esa carpeta

En app.js, usa path.join() para definir la ruta absoluta de tu carpeta:

javascript
Copy
Download
const express = require('express');
const path = require('path'); // Importar el módulo 'path'
const app = express();

// Configurar EJS y la carpeta personalizada
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'templates')); // ← ¡Apunta a tu carpeta!

// Rutas
app.get('/', (req, res) => {
    res.render('index'); // Buscará en templates/index.ejs

✅ Separación de lógica y presentación
✅ Reutilización de componentes
✅ Renderizado rápido del lado del servidor

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

// Configurar EJS (plantillas en raíz)
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname)); // Busca plantillas en el directorio actual

// Servir archivos estáticos desde /public
app.use(express.static(path.join(__dirname, 'public')));

// Ruta principal
app.get('/', (req, res) => {
    res.render('index', { nombreUsuario: 'Juan' });
});

app.listen(3000, () => {
    console.log('Servidor en http://localhost:3000');
});

Motores de Plantillas Populares en Node.js

1. EJS (Embedded JavaScript)

Uno de los más sencillos y similares a HTML tradicional.

Características:
🔹 Sintaxis familiar con <% %> para código JS.
🔹 Fácil integración con Express.

Ejemplo:

ejs
Copy
Download
<h1>Hola, <%= nombreUsuario %></h1>

Instalación:

bash
Copy
Download
npm install ejs

2. Pug (antes Jade)

Un motor de plantillas con sintaxis minimalista basada en indentación.

Características:
🔹 Menos código gracias a su sintaxis simplificada.
🔹 Soporta herencia de plantillas.

Ejemplo:

pug
Copy
Download
h1 Hola, #{nombreUsuario}

Instalación:

bash
Copy
Download
npm install pug

3. Handlebars

Inspirado en Mustache, con sintaxis limpia y soporte para helpers.

Características:
🔹 Sintaxis {{ }} fácil de leer.
🔹 Soporta bloques parciales y lógica condicional.

Ejemplo:

handlebars
Copy
Download
<h1>Hola, {{nombreUsuario}}</h1>

Instalación:

bash
Copy
Download
npm install express-handlebars

4. Nunjucks

Desarrollado por Mozilla, potente y altamente configurable.

Características:
🔹 Herencia de plantillas avanzada.
🔹 Filtros y macros para reutilización.

Ejemplo:

nunjucks
Copy
Download
<h1>Hola, {{ nombreUsuario }}</h1>

Instalación:

bash
Copy
Download
npm install nunjucks

¿Cómo Usar un Motor de Plantillas con Express?

Aquí un ejemplo básico con EJS:

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

// Configurar EJS como motor de plantillas
app.set('view engine', 'ejs');

// Ruta para renderizar una vista
app.get('/', (req, res) => {
    res.render('index', { nombreUsuario: 'Juan' });
});

app.listen(3000, () => {
    console.log('Servidor en http://localhost:3000');
});

¿Cuál Elegir?

🔸 EJS: Ideal si buscas algo simple y similar a HTML.
🔸 Pug: Perfecto si prefieres sintaxis minimalista.
🔸 Handlebars: Excelente para proyectos con lógica de plantillas modular.
🔸 Nunjucks: Potente y flexible para aplicaciones complejas.

Conclusión

Los motores de plantillas son esenciales para desarrollar aplicaciones web dinámicas en Node.js. Dependiendo de tus necesidades, puedes elegir entre opciones como EJS, Pug, Handlebars o Nunjucks, cada una con sus propias ventajas.

¿Ya has usado alguno? ¡Cuéntanos tu experiencia en los comentarios!


Estructura propuesta (sin carpeta views):

Copy
Download
tu-proyecto/
├── public/           # Carpeta para archivos estáticos
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── script.js
│   └── images/
│       └── logo.png
├── index.ejs         # Plantilla EJS (en raíz)
├── app.js            # Servidor Express
└── package.json      # Dependencias

🔧 Código modificado (app.js):

javascript
Copy
Download
const express = require('express');
const app = express();
const path = require('path');

// Configurar EJS como motor de plantillas
app.set('view engine', 'ejs');
// Indicar que las plantillas están en el directorio raíz (no en 'views')
app.set('views', path.join(__dirname));

// Ruta para renderizar la vista
app.get('/', (req, res) => {
    res.render('index', { nombreUsuario: 'Juan' }); // Buscará index.ejs en la raíz
});

app.listen(3000, () => {
    console.log('Servidor en http://localhost:3000');
});

📝 Explicación:

  1. app.set('views', path.join(__dirname)):

    • Le dice a Express que busque las plantillas en el directorio actual (en lugar de la carpeta views por defecto).

    • __dirname es la ruta absoluta del directorio donde está app.js.

  2. index.ejs en la raíz:

    • El archivo debe estar al mismo nivel que app.js.

    • Ejemplo de contenido (index.ejs):

      html
      Copy
      Download
      Run
      <!DOCTYPE html>
<html>
<head>
    <title>Mi App</title>
</head>
<body>
    <h1>Bienvenido, <%= nombreUsuario %></h1>
</body>
</html>

⚠️ Consideraciones:

  • No es la convención estándar: Express espera por defecto la carpeta views, pero esto funciona si prefieres evitar carpetas adicionales.

  • Puede volverse desordenado: Si tienes muchas plantillas, es mejor organizarlas en views/.

🔥 Alternativa recomendada (si cambias de opinión):

Si luego decides usar la carpeta views, solo debes:

  1. Crear la carpeta views y mover ahí index.ejs.

  2. Eliminar la línea app.set('views', path.join(__dirname)) (Express usará views/ por defecto).

Template Engines en Express: Potencia tus Vistas con EJS

¿Qué son los Template Engines?

Los motores de plantillas (como EJS) te permiten:

  • Generar HTML dinámico en el servidor

  • Inyectar datos de JavaScript directamente en tus vistas

  • Reutilizar componentes (headers, footers, etc.)

  • Simplificar la creación de interfaces complejas

Diagrama de funcionamiento de EJS

🔧 Configuración Express + EJS (Paso a Paso)

1. Instalación

bash
Copy
Download
npm install ejs

2. Configuración básica en Express

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

// Configurar EJS como motor de plantillas
app.set('view engine', 'ejs');
app.set('views', './views'); // Carpeta donde estarán las plantillas

// Ruta para renderizar una vista
app.get('/', (req, res) => {
  res.render('index', { 
    title: 'Mi Sitio Web',
    user: { name: 'Ana' }
  });
});

🧩 Sintaxis EJS Esencial

Insertar valores

html
Copy
Download
Run
<!-- views/index.ejs -->
<h1>Bienvenido a <%= title %></h1>
<p>Usuario: <%= user.name %></p>

Condicionales

html
Copy
Download
Run
<% if (user) { %>
  <p>Bienvenido de vuelta, <%= user.name %>!</p>
<% } else { %>
  <a href="/login">Iniciar sesión</a>
<% } %>

Bucles

html
Copy
Download
Run
<ul>
  <% products.forEach(product => { %>
    <li><%= product.name %> - $<%= product.price %></li>
  <% }); %>
</ul>

🏗️ Estructura de archivos recomendada

Copy
Download
project/
├── views/
│   ├── partials/
│   │   ├── header.ejs
│   │   └── footer.ejs
│   ├── pages/
│   │   ├── index.ejs
│   │   └── about.ejs
│   └── layouts/
│       └── main.ejs
└── app.js

🧠 Conceptos Avanzados

1. Layouts (Plantillas base)

layouts/main.ejs

html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <%- include('../partials/header') %>
  
  <main>
    <%- body %> <!-- Aquí se inyecta el contenido específico -->
  </main>

  <%- include('../partials/footer') %>
</body>
</html>

Uso en rutas:

javascript
Copy
Download
app.get('/', (req, res) => {
  res.render('pages/index', { 
    title: 'Inicio',
    body: 'Contenido principal aquí' 
  });
});

2. Includes (Componentes reutilizables)

partials/header.ejs

html
Copy
Download
Run
<header>
  <nav>
    <a href="/">Inicio</a>
    <a href="/about">Acerca de</a>
  </nav>
</header>

Inclusión en otras vistas:

html
Copy
Download
Run
<%- include('partials/header') %>

💡 Mejores Prácticas

  1. Mantén la lógica mínima en las vistas

  2. Preprocesa datos en el controlador antes de pasarlos a la vista

  3. Usa partials para elementos repetitivos

  4. Organiza tus vistas en subcarpetas lógicas

  5. Escapa datos dinámicos con <%= %> para seguridad XSS

🚀 Ejemplo Completo: Blog Simple

javascript
Copy
Download
// app.js
app.get('/posts', (req, res) => {
  const posts = [
    { id: 1, title: 'Primer post', content: 'Contenido...' },
    { id: 2, title: 'Segundo post', content: 'Más contenido...' }
  ];
  
  res.render('posts/list', { posts });
});

views/posts/list.ejs

html
Copy
Download
Run
<%- include('../layouts/main') %>

<% content_for('body') { %>
  <h1>Últimos Posts</h1>
  
  <% posts.forEach(post => { %>
    <article>
      <h2><%= post.title %></h2>
      <p><%= post.content %></p>
    </article>
  <% }); %>
<% } %>

📌 Conclusión

EJS es perfecto para:
✅ Proyectos que necesitan SSR (Server-Side Rendering)
✅ Desarrolladores que ya conocen HTML/JS
✅ Aplicaciones medianas donde React/Vue serían excesivo

Tip Extra: Combínalo con express-ejs-layouts para un sistema de layouts más robusto:

bash
Copy
Download
npm install express-ejs-layouts

¿Quieres profundizar? Prueba estos temas avanzados:

  • Filtros personalizados

  • Helpers globales

  • Internacionalización

  • Caché de plantillas

¡Ahora tienes todo para crear vistas dinámicas profesionales con Express y EJS! 🚀


Comentarios

Publicar un comentario

Entradas más populares de este blog

Lista de Tareas

Inicializar el proyecto bash npm init --yes Express - El framework web bash npm install express Morgan - Logger para desarrollo bash npm install morgan Motor de plantillas bash npm install ejs npm install npm start Aplicación de Lista de Tareas con Node.js y Express Voy a enseñarte cómo crear una aplicación web básica de lista de tareas usando Node.js y Express, donde solo guardaremos el nombre de cada tarea. Estructura del proyecto Copy Download /todo-app ├── app.js # Archivo principal de la aplicación ├── package.json # Archivo de configuración del proyecto ├── views/ # Carpeta para las plantillas │ ├── index.ejs # Plantilla principal └── public/ # Carpeta para archivos estáticos (CSS, JS) Paso 1: Configuración inicial Primero, crea un nuevo proyecto Node.js: bash Copy Download mkdir todo-app cd todo-app npm init -y Paso 2: Instalar dependencias Instala Express y EJS (motor de plantillas): bash Copy Download npm install express e...
Leer más

9-Nuestra Primera Plantilla con EJS

Imagen
  Creando Nuestra Primera Plantilla con EJS y Express   5- EXPRESS            |           V 6- MIDDLEWARE            |           V 7- express.static            |           V 8- Motor de plantilla            |           V      9-Plantilla mi-app/ ├── public/ # Archivos estáticos (opcional) │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── app.js │ └── images/ │ └── logo.png ├── views/ # Carpeta para las plantillas EJS (obligatoria) │ ├── index.ejs # Vista principal │ └── partials/ # Fragmentos reutilizables (opcional) │ ├── header.ejs │ └── footer.ejs ├── app.js # Archivo principal de la aplicación └── package.json # Configuración del proyecto En este post, aprenderemos...
Leer más

6-Middleware?

Imagen
  Middleware en Node.js con Express: Guía Definitiva      5- EXPRESS            |           V 6-MIDDLEWARE ¿Qué es un Middleware? mi-app/ ├ app.js └── package.json El middleware son  funciones intermedias  que procesan las solicitudes ( req ) y respuestas ( res ) en tu aplicación Express. Actúan como "puentes" entre la recepción de una petición y el envío de la respuesta final. 🔧 Tipos de Middleware 1.  Middleware de Aplicación Se ejecutan en  todas las rutas : javascript Copy Download app . use ( ( req , res , next ) => { console . log ( 'Middleware global' ) ; next ( ) ; // ¡No olvides next()! } ) ; 2.  Middleware de Ruta Específicos para ciertas rutas: javascript Copy Download app . get ( '/ruta' , ( req , res , next ) => { console . log ( 'Middleware solo para /ruta' ) ; next ( ) ; } ) ; 3.  Middleware de Terceros Paquetes externos como  body-...
Leer más