2: Motor de plantillas EJS-TAREAS

🎯 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:

javascript
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:

javascript
// 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:

html
<!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í:

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

4️⃣ Ejecutar y ver el resultado

En la terminal:

bash
node app.js

O si configuraste el script start:

bash
npm start

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

text
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:

javascript
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:

html
<!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:

SintaxisFunció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:

bash
npm install nodemon --save-dev

Modificar el script start en package.json:

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

Ejecutar en modo desarrollo:

bash
npm run dev

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

text
[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:

javascript
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

ConceptoAprendizaje
res.render()Renderiza una plantilla EJS
Carpeta viewsLugar donde van los archivos .ejs
Sintaxis <%= %>Mostrar variables en la vista
Sintaxis <% %>Ejecutar lógica JavaScript en la plantilla
NodemonHerramienta para reinicio automático

Código ACTUALIZADO (sin body-parser)

app.js moderno:

javascript
const express = require('express');
const morgan = require('morgan');
const path = require('path');

const app = express();

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

// Middlewares
app.use(morgan('dev'));

// ✅ ESTO REEMPLAZA a body-parser (Express 4.16+)
app.use(express.json());                    // Para recibir JSON (APIs REST)
app.use(express.urlencoded({ extended: false }));  // Para recibir formularios HTML

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

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


🚀 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?

Comentarios

Publicar un comentario

Entradas más populares de este blog

Cómo Iniciar un Proyecto Node.js

  Cómo Iniciar un Proyecto Node.js desde Cero: Guía Paso a Paso Solución 1: Cambiar la política de ejecución (recomendado) Abre PowerShell  como administrador . Ejecuta este comando para permitir la ejecución de scripts firmados: powershell Copy Download Set-ExecutionPolicy RemoteSigned - Scope CurrentUser Si estás comenzando con Node.js, esta guía te mostrará cómo configurar un proyecto básico con las herramientas esenciales. Paso 1: Inicializar el proyecto bash Copy Download npm init --yes Este comando crea automáticamente un archivo  package.json  con valores predeterminados. El  package.json  es el corazón de tu proyecto Node.js, donde se almacenan: Dependencias del proyecto Scripts personalizados Metadatos del proyecto (nombre, versión, descripción, etc.) Paso 2: Instalar dependencias esenciales Express - El framework web bash Copy Download npm install express Express es el framework web más popular para Node.js. Te permite: Crear rutas (endpoints)...
Leer más

5-Express--Curso de Node.js#05 Introducción a Express.js

Express: Dominando Servidores Web con Node.js y Express   5- EXPRESS            |           V 6-MIDDLEWARE mi-app/ ├app.js └── package.json Comando: bash npm init -y Instalando dependencias. bash npm install express El error principal está en la etiqueta <a> : escribiste hreft en lugar de href . Además, hay un error en el cierre de la etiqueta <style> . Aquí está el código corregido: javascript const express = require ( 'express' ) ; const app = express ( ) ; const port = 3000 ; app . use ( express . urlencoded ( { extended : true } ) ) ; //Arreglo de productos let productos = [ { id : 1 , nombre : 'Coca-cola' , precio : 100 } , { id : 2 , nombre : 'pepsi' , precio : 90 } ] ; app . get ( '/' , ( req , res ) => { let lista = '' ; for ( let i = 0 ; i < productos . length ; i ++ ) { lista += ` ...
Leer más

8-Template Engines

¿Qué es un Motor de Plantillas?   5- EXPRESS            |           V 6- MIDDLEWARE            |           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: pp . set ( 'view engine' , 'ejs' ) ; app . set ( 'views' , './templates' ) ; res . render ( 'index' ) ; // Buscará /home/usuario/proyecto/index.ejs Parámetros: Primer p...
Leer más