2-Web de Lista de Libros-Vistas (EJS)

Cómo Agregar un Sistema de Vistas con EJS en Node.js y Express

Si estás desarrollando una aplicación web con Node.js y Express, usar un motor de plantillas como EJS (Embedded JavaScript) puede simplificar la creación de vistas dinámicas. En este tutorial, te mostraré cómo configurar EJS en tu proyecto paso a paso.

 Inicializar el proyecto

bash

npm init --yes

npm init -y

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


Métodos para Iniciar el Proyecto

a) npm run dev (Recomendado para desarrollo)

bash

npm run dev

  • Cómo funciona: Ejecuta el script "dev" definido en tu package.json

  • Requisito: Debes tener Nodemon instalado y configurado en package.json:

  • json

"scripts": {

  "dev": "nodemon app.js"

  • }

c) npm start (Para producción)

bash

npm start

  • Configuración típica:

  • json

"scripts": {

  "start": "node app.js"

}



📦 Paso 1: Instalar EJS

Primero, instala el paquete EJS desde npm:

bash
Copy
Download
npm install ejs

📂 Paso 2: Crear la Estructura de Carpetas

Organiza tu proyecto para incluir una carpeta views donde estarán tus plantillas:

text
Copy
Download
mi-app/
├── node_modules/
├── views/          ← Nueva carpeta para las vistas
│   └── index.ejs   ← Tu primera plantilla EJS
├── app.js          ← Archivo principal
├── package.json
└── .gitignore

 Inicializar el proyecto

bash

npm init --yes

npm init -y
npm init

Express - El framework web

bash

npm install express

Morgan - Logger para desarrollo

bash

npm install morgan

npm install nodemon


npm install


npm start


Métodos para Iniciar el Proyecto

a) npm run dev (Recomendado para desarrollo)

bash

npm run dev

  • Cómo funciona: Ejecuta el script "dev" definido en tu package.json

  • Requisito: Debes tener Nodemon instalado y configurado en package.json:

  • json

"scripts": {

  "dev": "nodemon app.js"

  • }

c) npm start (Para producción)

bash

npm start

  • Configuración típica:

  • json

"scripts": {

  "start": "node app.js"

}


⚙️ Paso 3: Configurar Express para Usar EJS

Modifica tu app.js para configurar EJS como motor de plantillas:

javascript
Copy
Download
const express = require('express');
const path = require('path'); // Para manejar rutas de archivos
const app = express();

// Configuración de EJS
app.set('views', path.join(__dirname, 'views')); // Define la carpeta de vistas
app.set('view engine', 'ejs'); // Establece EJS como motor de plantillas

// Ruta principal que renderiza index.ejs
app.get('/', (req, res) => {
  res.render('index', { titulo: 'Mi App Web' }); // Pasa datos a la vista
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Servidor en http://localhost:${PORT}`);
});

🖥️ Paso 4: Crear tu Primera Vista (index.ejs)

Dentro de views/index.ejs, crea una plantilla HTML con sintaxis EJS para mostrar datos dinámicos:

html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
    <title><%= titulo %></title>
</head>
<body>
    <h1>Bienvenido a <%= titulo %></h1>
    <p>Esta es mi primera vista con EJS</p>
</body>
</html>

🔹 ¿Qué hace este código?

  • <%= titulo %> → Renderiza la variable titulo que pasamos desde res.render().

  • EJS permite incrustar JavaScript directamente en HTML para contenido dinámico.

🚀 ¡Listo!

Ahora, al acceder a http://localhost:3000, verás tu página renderizada con el título dinámico.

💡 Conclusión

EJS es una excelente opción para generar vistas dinámicas en Node.js de manera sencilla. Puedes extenderlo con layouts, partials y lógica más compleja según tus necesidades.

¿Quieres aprender más sobre EJS? ¡Déjame un comentario! 👇

🔗 Posibles mejoras para futuros posts:

  • Uso de layouts y partials en EJS.

  • Pasar datos más complejos (arrays, objetos).

  • Integración con bases de datos para contenido dinámico.

¡Espero que este post te sea útil! Si te gustó, compártelo en tus redes. 

========================================

Pasos siguientes para expandir:

  • Agregar Archivos Estáticos (public)



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

- Explicación

Esta línea de código en Express.js realiza dos funciones importantes:

1. app.set('views', ...)

Establece el directorio donde Express buscará las plantillas (views) para renderizar.

  • Express necesita saber dónde están almacenados tus archivos de plantillas (como index.ejs, about.ejs, etc.)

  • Por defecto, Express buscaría en un directorio llamado views en el directorio raíz, pero esto lo hace explícito

2. path.join(__dirname, 'views')

Construye la ruta completa al directorio de vistas:

  • __dirname: Variable global en Node.js que contiene la ruta absoluta del directorio donde se encuentra el archivo actual (app.js)

  • path.join(): Une segmentos de ruta de manera compatible con cualquier sistema operativo

  • 'views': Nombre de la carpeta donde estarán tus plantillas

¿Por qué es importante?

  • Organización: Mantiene todas tus plantillas en un lugar específico

  • Portabilidad: Al usar rutas absolutas (con __dirname), tu aplicación funcionará sin importar desde dónde la ejecutes

  • Seguridad: Limita desde dónde Express puede cargar plantillas

Ejemplo práctico

Si tu estructura es:

text
Copy
Download
/proyecto
  /node_modules
  /views       ← aquí están index.ejs, about.ejs
  app.js       ← este archivo

Cuando usas path.join(__dirname, 'views') en app.js, el resultado será algo como:

  • En Windows: C:\proyecto\views

  • En Linux/Mac: /home/usuario/proyecto/views

Así Express sabrá exactamente dónde buscar tus plantillas sin importar el sistema operativo.


Explicación de app.get() y res.render()

Esta parte del código define una ruta básica en tu aplicación Express. Vamos a desglosarla:

app.get('/', ...)

  • app.get: Método que define cómo manejar solicitudes HTTP GET a una ruta específica

  • '/': Es la ruta raíz de tu aplicación (la página principal, como www.tusitio.com/)

==================================

La función callback (req, res) => {...}

Se ejecuta cuando alguien visita la ruta /. Recibe dos parámetros:

  • req (request): Contiene información sobre la solicitud HTTP (datos del cliente, parámetros, etc.)

  • res (response): Objeto para enviar respuestas al cliente

res.render('index', { title: 'Mi App' })

  • res.render(): Método para renderizar una plantilla (view) y enviarla como respuesta

    • 'index': Nombre de la plantilla a renderizar (buscará views/index.ejs)

    • { title: 'Mi App' }: Objeto con datos que pasas a la plantilla

Flujo completo

  1. Un usuario visita http://tudominio.com/ (hace una petición GET a /)

  2. Express ejecuta esta función callback

  3. Renderiza la plantilla index.ejs con los datos proporcionados

  4. Envía el HTML resultante al navegador del usuario

Ejemplo con archivos

Supongamos que tienes:

text
Copy
Download
/views
  index.ejs

index.ejs podría contener:

html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1>Bienvenido a <%= title %></h1>
</body>
</html>

El resultado final que vería el usuario sería:

html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
  <title>Mi App</title>
</head>
<body>
  <h1>Bienvenido a Mi App</h1>
</body>
</html>

¿Por qué es importante?

  • Define el punto de entrada principal de tu aplicación web

  • Combina la lógica del servidor con la presentación (plantillas)

  • Permite pasar datos dinámicos a tus vistas

  • Es la base sobre la que construirás rutas más complejas


Pasos siguientes para expandir:

  • Agregar Archivos Estáticos (public)

git remoto agregar origen https://github.com/SaulSoteloSuastegui/node-libros.git git rama -M principal 

git push -u origen principal

git push -u origen principal

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

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