10-Router en Express para tu Blog-b

 

 Router en Express para tu Blog

Introducción al Router en Express

El router en Express es una herramienta poderosa que nos permite organizar nuestras rutas de manera modular y escalable. En este post, exploraremos cómo implementar un sistema de routing eficiente en nuestras aplicaciones Node.js con Express.

 
   5-EXPRESS
           |
          V
6-MIDDLEWARE
           |

          V

 7-express.static
        |

          V

8-Motor de plantilla

           |

          V

       9-Plantilla

           |

          V

    10-Router-10-1-Rutas

Estructura Básica del Proyecto

Antes de implementar el router, veamos la estructura de nuestro proyecto:

Copy

Download

mi-app/
├── public/          # Carpeta de archivos estáticos
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── app.js
│   ├── 404.html
│
├── router/
│    ├── RutasWeb.js
│    ├── Mascotas.js
│
└── views
     ├── index.ejs
     ├── mascotas.ejs
     └── template/
          ├── cabecera.ejs
          └── footer.ejs

Configuración Básica del Router

Para comenzar, creamos un archivo de rutas (RutasWeb.js) donde definiremos nuestras rutas principales:

javascript        RutasWeb.js

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.render("index", {titulo: "mi titulo"})
});

router.get('/servicios', (req, res) => {
  res.render("servicios")
});

module.exports = router;

Integrando el Router en la Aplicación Principal

En nuestro archivo principal (app.js), importamos y usamos nuestras rutas:

javascript

app.js

const express = require('express');
const app = express();

// Configuraciones previas...

app.use(express.static(__dirname + "/public"));

// Rutas web
app.use('/', require('./router/RutasWeb'));

// Middleware para manejar errores 404
app.use((req, res, next) => {
  res.status(404).render("404", {
    titulo: "404",
    descripcion: "Título del sitio web"
  })
});

Prefijos de Ruta

Una ventaja importante del router es que podemos agregar prefijos a nuestras rutas:

javascript

Copy

Download

app.use('/api', require('./router/RutasWeb'));

Esto haría que nuestras rutas se accedan como:

• localhost:3000/api/

• localhost:3000/api/servicios

Creando un Router Específico para Mascotas

Para demostrar la modularidad, creamos un router específico para manejar mascotas:

1. Archivo router/Mascotas.js:

javascript:router/Mascotas.js

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.render("mascotas", {
    arrayMascotas: [
      {id: 1, nombre: 'rex', descripcion: 'perro'},
      {id: 2, nombre: 'yaki', descripcion: 'gato'}
    ]
  })
});

module.exports = router;

2. Integración en app.js:

javascript

Copy

Download

app.use('/mascotas', require('./router/Mascotas'));

Vista de Mascotas

La vista mascotas.ejs mostraría nuestros datos:

html

Copy

Download

Run

<%- include("template/cabecera") %>

<div class="container">
  <% if (arrayMascotas.length > 0) { %>
    <table>
      <% arrayMascotas.forEach(mascota => { %>
        <tr>
          <td><%= mascota.id %></td>
          <td><%= mascota.nombre %></td>
          <td><%= mascota.descripcion %></td>
        </tr>
      <% }) %>
    </table>
  <% } %>
</div>

<%- include("template/footer") %>

Beneficios de Usar Router

1. Organización del código: Mantenemos las rutas relacionadas juntas en archivos separados.

2. Escalabilidad: Podemos añadir nuevas rutas sin saturar el archivo principal.

3. Prefijos: Facilidad para versionar APIs o agrupar rutas bajo un mismo path.

4. Mantenibilidad: Más fácil de entender y modificar.

Conclusión

El sistema de routing en Express es fundamental para construir aplicaciones web organizadas y mantenibles. Al modularizar nuestras rutas, mejoramos la estructura del proyecto y facilitamos su crecimiento futuro.

¿Has implementado routers en tus proyectos de Express? ¡Comparte tus experiencias en los comentarios!

*****************************************

Te explico paso a paso de forma CLARA:

1. ¿Dónde está el archivo de rutas?

text

mi-proyecto/
├── app.js
├── router/              ← Carpeta que debes CREAR
│   └── RutasWeb.js      ← Archivo de rutas
└── views/
    ├── index.ejs
    ├── servicios.ejs
    └── 404.ejs

2. Contenido del archivo router/RutasWeb.js:

javascript

const express = require('express');
const router = express.Router();  // Crear un "mini-app" de rutas

router.get('/', (req, res) => {
  res.render("index", {titulo: "mi titulo"})
});

router.get('/servicios', (req, res) => {
  res.render("servicios")
});

module.exports = router;  // Exportar el router para usarlo en app.js

3. Cómo se IMPORTAR y USA en app.js:

javascript

const express = require('express');
const app = express();

// ============ IMPORTAR el router ============
const rutasWeb = require('./router/RutasWeb');  // ← ASÍ SE IMPORTA

// ============ USAR el router ============
app.use('/', rutasWeb);  // ← ASÍ SE USA
// app.use('/', require('./router/RutasWeb'));  // ← También funciona (importar y usar en 1 línea)

Explicación visual de cómo funciona:

text

Cuando alguien visita:
http://localhost:3000/
                ↓
         app.use('/', rutasWeb)
                ↓
        Busca en RutasWeb.js:
        router.get('/') ← ¡COINCIDE!
                ↓
        Ejecuta: res.render("index")

text

Cuando alguien visita:
http://localhost:3000/servicios
                ↓
         app.use('/', rutasWeb)
                ↓
        Busca en RutasWeb.js:
        router.get('/servicios') ← ¡COINCIDE!
                ↓
        Ejecuta: res.render("servicios")

Comparación SIN router (código desordenado):

javascript

// app.js - Todo mezclado (MALA PRÁCTICA)
app.get('/', (req, res) => {
  res.render("index")
});

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

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

// Si tienes 100 rutas, este archivo sería ENORME

Comparación CON router (código ordenado):

javascript

// app.js - LIMPIO y ORGANIZADO
const rutasWeb = require('./router/RutasWeb');
app.use('/', rutasWeb);

javascript

// router/RutasWeb.js - Todas las rutas principales aquí
router.get('/', ...);
router.get('/servicios', ...);
router.get('/contacto', ...);

Ejemplo COMPLETO de app.js con tu código original:

javascript

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

const app = express();
const PORT = 3000;

// Configurar EJS
app.set('view engine', 'ejs');

// Middleware estático
app.use(express.static('public'));
app.use('/css', express.static('node_modules/bootstrap/dist/css'));
app.use('/js', express.static('node_modules/bootstrap/dist/js'));

// ============ IMPORTAR Y USAR EL ROUTER ============
const rutasWeb = require('./router/RutasWeb');  // ← IMPORTA
app.use('/', rutasWeb);                          // ← USA

// Middleware 404 (si ninguna ruta coincide)
app.use((req, res) => {
  res.status(404).render("404", {
    titulo: "404",
    descripcion: "Página no encontrada"
  });
});

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

Resumen:

Concepto	Explicación
Importar	const algo = require('./ruta/al/archivo')
Usar	app.use('/prefijo', algo)
¿Qué hace router?	Agrupa rutas relacionadas en un archivo separado
Beneficio	Mantiene app.js limpio y organizado

¿Lo entiendes ahora o necesitas que profundice en alguna parte?

Esto siempre se pone app.use('/', rutasWeb); para tener aceso a todas las rutas?

¡Correcto! Pero con un matiz importante:

app.use('/', rutasWeb) significa:

"Todas las rutas que empiecen con / van a ser manejadas por rutasWeb"

Pero como TODAS las rutas empiezan con / (ej: /, /servicios, /contacto, /productos/123), efectivamente todas pasan por ese router.

Ejemplo práctico:

javascript

// En app.js
app.use('/', rutasWeb);

// En router/RutasWeb.js
router.get('/')           // Maneja: /
router.get('/servicios')  // Maneja: /servicios
router.get('/contacto')   // Maneja: /contacto
router.get('/productos/:id') // Maneja: /productos/123

¿Puede ser diferente el prefijo?

¡SÍ! Puedes cambiar el prefijo para organizar mejor:

Opción 1: Prefijo / (todas las rutas principales)

javascript

app.use('/', rutasWeb);
// Acceso: /, /servicios, /contacto

Opción 2: Prefijo /admin (rutas de administración)

javascript

app.use('/admin', adminRoutes);
// Acceso: /admin, /admin/usuarios, /admin/config

Opción 3: Prefijo /api (rutas de API)

javascript

app.use('/api', apiRoutes);
// Acceso: /api/productos, /api/usuarios

Ejemplo con MÚLTIPLES routers:

javascript

// app.js
const webRoutes = require('./router/RutasWeb');
const adminRoutes = require('./router/RutasAdmin');
const apiRoutes = require('./router/RutasAPI');

app.use('/', webRoutes);        // Para usuarios normales
app.use('/admin', adminRoutes);  // Para administradores
app.use('/api', apiRoutes);      // Para API REST

// Ahora:
// /servicios     → webRoutes
// /admin/productos → adminRoutes
// /api/productos → apiRoutes

¿Es obligatorio usar app.use('/', rutasWeb)?

No, pero es la forma más común. Alternativas:

Alternativa 1: Definir rutas directamente en app.js

javascript

app.get('/', ...);
app.get('/servicios', ...);
// Menos organizado

Alternativa 2: Usar sin prefijo (es lo mismo)

javascript

app.use(rutasWeb);  // Sin el '/', por defecto es '/'
// Es IDÉNTICO a app.use('/', rutasWeb)

Resumen:

Código	Significado	Rutas que maneja
app.use('/', rutasWeb)	Todas las rutas	/, /cualquier/cosa
app.use('/admin', rutasWeb)	Solo las que empiezan con /admin	/admin, /admin/usuarios
app.use(rutasWeb)	Lo mismo que '/'	Todas las rutas

¿Siempre se pone con /?
Sí, si quieres que maneje TODAS las rutas de tu sitio web principal. Es la práctica más común para las rutas públicas de tu aplicación.