Saltar al contenido principal

Creación de vistas

Express, a diferencia de Laravel, no incluye un motor de plantillas propio, pero permite integrar fácilmente diferentes opciones como EJS, Pug o Handlebars. Estos motores permiten generar contenido dinámico en el lado del servidor, renderizando HTML con datos enviados desde las rutas o controladores.

Configuración de un motor de plantillas​

Para utilizar un motor de plantillas, primero se debe instalar. Por ejemplo, con EJS:

npm install ejs

En el archivo principal de la aplicación (app.js o server.js), se configura:

import express from 'express';
const app = express();

// Configuración de vistas
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

Con esto, Express buscará las vistas en la carpeta views/ y usará EJS para renderizarlas.

Creación de una vista​

En la carpeta views/ se puede crear un archivo usuarios.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Listado de Usuarios</title>
</head>
<body>
    <h1>Usuarios</h1>
    <ul>
        <% usuarios.forEach(function(usuario) { %>
            <li><%= usuario.nombre %> (<%= usuario.email %>)</li>
        <% }); %>
    </ul>
</body>
</html>

En este ejemplo:

  • <% %> se usa para lógica de control (bucles, condicionales).
  • <%= %> se usa para imprimir valores escapados, evitando inyección de código.

Renderizar la vista desde una ruta​

En el controlador o ruta, se envían los datos a la vista con res.render():

app.get('/usuarios', (req, res) => {
    const usuarios = [
        { nombre: 'Juan', email: 'juan@mail.com' },
        { nombre: 'Ana', email: 'ana@mail.com' }
    ];
    res.render('usuarios', { usuarios });
});

Aquí, los datos del array usuarios se pasan a la plantilla usuarios.ejs, donde estarán disponibles para su renderizado.

Buenas prácticas y convenciones​

  • Mantener las vistas dentro de la carpeta views/ y organizarlas por módulos o recursos.
  • Utilizar un motor de plantillas ligero y consistente en todo el proyecto (EJS es una opción común para proyectos simples).
  • Evitar lógica compleja en las vistas; toda la lógica de negocio debe estar en controladores o servicios.
  • Escapar siempre los datos al imprimirlos (<%= %> en EJS) para prevenir inyecciones de código.
  • Reutilizar layouts o parciales para mantener consistencia visual y evitar duplicación de código.