2: Motor de plantillas EJS

🎯 Objetivo de esta parte

Aprender a usar EJS como motor de plantillas para renderizar vistas HTML dinámicas, en lugar de enviar texto plano con res.send().

1️⃣ Recordatorio: ¿Dónde estábamos?

En la parte 1 teníamos un servidor que respondía "hola mundo" como texto plano:

app.get('/', (req, res) => {
    res.send('hola mundo');
});

Ahora vamos a cambiar eso para que renderice un archivo HTML con EJS.

2️⃣ Cambiar `res.send` por `res.render`

Modifica la ruta principal en tu app.js:

// ANTES
app.get('/', (req, res) => {
    res.send('hola mundo');
});

// AHORA
app.get('/', (req, res) => {
    res.render('index');
});

📖 Explicación:

res.render('index') le dice a Express: "busca un archivo llamado index.ejs dentro de la carpeta views y muéstralo".
Express ya sabe que debe buscar .ejs porque lo configuramos con app.set('view engine', 'ejs').

3️⃣ Crear el archivo `index.ejs`

Dentro de la carpeta views, crea un archivo llamado index.ejs con el siguiente contenido:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mi App con EJS</title>
</head>
<body>
    <h1>Bienvenido a EJS</h1>
    <p>Esto es un archivo de plantilla EJS</p>
</body>
</html>

Tu estructura de archivos debería verse así:

ejs-node/
├── node_modules/
├── views/
│   └── index.ejs
├── app.js
├── package.json
└── package-lock.json

4️⃣ Ejecutar y ver el resultado

En la terminal:

node app.js

O si configuraste el script start:

npm start

Abre http://localhost:3000 y verás:

Bienvenido a EJS
Esto es un archivo de plantilla EJS

🎉 Felicidades: Ya estás usando un motor de plantillas.

5️⃣ Pasar datos desde el servidor a la vista

Lo interesante de EJS es que puedes inyectar datos dinámicos. Modifica app.js:

app.get('/', (req, res) => {
    const nombre = 'Juan';
    const tareas = ['Estudiar Node', 'Hacer ejercicio', 'Leer un libro'];

    res.render('index', {
        titulo: 'Mi App de Tareas',
        usuario: nombre,
        listaTareas: tareas
    });
});

Y modifica index.ejs:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><%= titulo %></title>
</head>
<body>
    <h1>Hola <%= usuario %></h1>
    <h2>Tareas pendientes:</h2>
    <ul>
        <% for(let i = 0; i < listaTareas.length; i++) { %>
            <li><%= listaTareas[i] %></li>
        <% } %>
    </ul>
</body>
</html>

📖 Sintaxis EJS básica:

Sintaxis	Función
`<%= variable %>`	Muestra el valor escapado (seguro para HTML)
`<%- variable %>`	Muestra el valor sin escapar (peligroso si es HTML del usuario)
`<% codigo %>`	Ejecuta código JavaScript sin mostrar nada

6️⃣ ⚠️ El problema: reiniciar el servidor manualmente

Cada vez que hagas un cambio en app.js o en index.ejs, tienes que reiniciar el servidor manualmente (Ctrl+C y node app.js de nuevo).

Esto es tedioso y ralentiza el desarrollo.

7️⃣ Solución: Nodemon (desarrollo más ágil)

Nodemon es una herramienta que reinicia automáticamente el servidor cuando detecta cambios.

Instalar nodemon como dependencia de desarrollo:

npm install nodemon --save-dev

Modificar el script `start` en `package.json`:

"scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js"
}

Ejecutar en modo desarrollo:

npm run dev

Ahora Nodemon vigilará los cambios y reiniciará el servidor automáticamente. Verás en consola:

[nodemon] restarting due to changes...
[nodemon] starting `node app.js`
servidor en puerto 3000

💡 Nota: Guarda nodemon como dependencia de desarrollo (--save-dev) porque solo lo usamos durante la programación, no en producción.

8️⃣ Tu código final en `app.js` (con body-parser incluido)

Según tus imágenes, tu app.js actual incluye body-parser. Aunque no lo usamos aún, lo dejamos preparado para la Parte 3:

const express = require('express');
const morgan = require('morgan');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();

app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', (req, res) => {
    res.render('index');
});

app.listen(app.get('port'), () => {
    console.log(`servidor en puerto ${app.get('port')}`);
});

📝 Resumen de esta parte

Concepto	Aprendizaje
`res.render()`	Renderiza una plantilla EJS
Carpeta `views`	Lugar donde van los archivos `.ejs`
Sintaxis `<%= %>`	Mostrar variables en la vista
Sintaxis `<% %>`	Ejecutar lógica JavaScript en la plantilla
Nodemon	Herramienta para reinicio automático

🚀 Próxima parte: App de tareas con POST y listado dinámico

En la Parte 3 vamos a:

Crear un formulario para agregar tareas
Usar body-parser (o express.urlencoded()) para recibir datos del formulario
Almacenar tareas temporalmente en un arreglo
Mostrar la lista actualizada de tareas

🔁 Nota final sobre `body-parser` (como lo pediste)

📌 Nota: En las imágenes que compartiste se usa body-parser como dependencia externa. En versiones actuales de Express (4.16+), no es necesario instalarlo. Puedes reemplazarlo por:
javascript
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
Lo mantendremos como está en el código por fidelidad a tus imágenes, pero ten en cuenta que es un paquete obsoleto para versiones recientes de Express.

¿Quieres que continúe con la Parte 3 donde haremos el CRUD básico de tareas con formularios y listado dinámico?

Buscar este blog

Node.js - Bootcamp Desarrollo Web inc. MVC y REST APIs