3-Web de Lista de Libros-Estáticos (public)

 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

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 2: Agregar Archivos Estáticos (public)

  1. Crea la carpeta public con subcarpetas

Nueva estructura:

text
Copy
Download
mi-app/
├── node_modules/
├── public/         ← Nueva carpeta
│   ├── css/
│   ├── js/
│   └── images/
├── views/
│   └── index.ejs
├── app.js
├── package.json
└── .gitignore

Modifica app.js:

javascript
Copy
Download
// ... (código anterior)

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

// ... (resto del código)

Actualiza views/index.ejs:

html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
    <title><%= titulo %></title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <h1>Bienvenido a <%= titulo %></h1>
    <p>Ahora con archivos estáticos</p>
    <script src="/js/app.js"></script>
</body>
</html>

Pasos siguientes para expandir:

  • Organizar Rutas


app.js

javascript
Copy
Download
const express = require('express');
const path = require('path');
const logger = require('morgan');
const cookieParser = require('cookie-parser');

// Importar rutas
const indexRouter = require('./routes/index');

const app = express();

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

// Middlewares
app.use(express.static(path.join(__dirname, 'public'))); // Archivos estáticos

// Rutas
app.use('/', indexRouter); // Todas las rutas empiezan con /

// Manejador de errores 404
app.use(function(req, res, next) {
  res.status(404).render('error', { title: 'Página no encontrada' });
});

// Manejador de errores generales
app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});

// Configuración del puerto y inicio del servidor
const PORT = process.env.PORT || 3000;

if (require.main === module) {
  app.listen(PORT, () => {
    console.log(`Servidor corriendo en http://localhost:${PORT}`);
  });
}




module.exports = app;

routes/index.js

javascript
Copy
Download
const express = require('express');
const router = express.Router();

/* GET home page (index.ejs) */
router.get('/', function(req, res, next) {
    // Renderiza la vista index.ejs con el título 'Biblioteca digital'
    res.render('index', { title: 'Biblioteca digital' });
});

module.exports = router;

views/index.ejs (corregido)

html
Copy
Download
Run
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p>Bienvenido a nuestra biblioteca digital</p>
    <p>Explora nuestra colección de libros</p>
</body>
</html>

Explicación del Flujo

  1. Inicio de la aplicación: Cuando se accede a la ruta raíz (/):

    • El servidor Express recibe la solicitud

    • El enrutador (routes/index.js) maneja la solicitud GET a /

    • Llama a la función que renderiza index.ejs con el título proporcionado

  2. Renderizado de la vista:

    • Express busca index.ejs en la carpeta views

    • Procesa la plantilla EJS, reemplazando <%= title %> con "Biblioteca digital"

    • Devuelve el HTML completo al navegador

  3. Manejo de errores:

    • Si se accede a una ruta no definida, se muestra la página de error 404

    • Para otros errores, se muestra una página de error genérica

Posibles Razones por las que No Funcionaba

  1. Falta de estructura HTML: La vista original no tenía la estructura básica HTML, lo que podía causar problemas de renderizado.

  2. Error ortográfico: "Biencenido" en lugar de "Bienvenido".

  3. Título no utilizado: El título que se pasaba desde el controlador no se estaba mostrando en la vista.

Mejoras Implementadas

  1. Estructura HTML completa en la vista

  2. Corrección de errores ortográficos

  3. Uso adecuado de las variables EJS

  4. Documentación clara del flujo de la aplicación

La aplicación ahora debería funcionar correctamente, mostrando la página de inicio con el título y los párrafos de bienvenida.

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