10-1-Rutas

 

Cómo Manejar Rutas Web en Node.js para una Aplicación Web

Si estás desarrollando una aplicación web tradicional (no solo una API), el manejo de rutas es clave para la navegación, renderizado de vistas y flujo de usuarios. En este post, aprenderás a estructurar rutas en Express.js para crear una aplicación web completa.

📌 ¿Qué Incluiremos?

✅ Rutas básicas para páginas web
✅ Renderizado de vistas con motores como EJS/Pug
✅ Rutas protegidas (autenticación)
✅ Manejo de formularios (POST)
✅ Errores 404 y redirecciones

1. Estructura Básica de una App Web con Express

Primero, instala Express y un motor de plantillas (usaremos EJS):

bash
Copy
Download
npm install express ejs

Crea un servidor básico con rutas para páginas:

javascript
Copy
Download
const express = require('express');
const app = express();
const PORT = 3000;

// Configurar EJS como motor de plantillas
app.set('view engine', 'ejs');
app.set('views', './views'); // Carpeta donde están las vistas

// Ruta para la página de inicio
app.get('/', (req, res) => {
  res.render('home', { title: 'Inicio' }); // Renderiza views/home.ejs
});

// Ruta para la página "Acerca de"
app.get('/about', (req, res) => {
  res.render('about', { title: 'Acerca de' });
});

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

📂 Estructura de archivos:

Copy
Download
/proyecto
  /views
    home.ejs
    about.ejs
  app.js

Ejemplo de home.ejs:

html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1>Bienvenido a <%= title %></h1>
  <a href="/about">Ir a About</a>
</body>
</html>

2. Rutas con Parámetros (Ej: Perfiles de Usuario)

Para páginas dinámicas (como un perfil de usuario):

javascript
Copy
Download
// Ruta con parámetro :username
app.get('/user/:username', (req, res) => {
  const user = {
    name: req.params.username,
    role: 'Admin'
  };
  res.render('profile', { user });
});

📌 Uso en profile.ejs:

html
Copy
Download
Run
<h2>Perfil de <%= user.name %></h2>
<p>Rol: <%= user.role %></p>

3. Rutas Protegidas (Middleware de Autenticación)

Ejemplo de ruta solo para usuarios logueados:

javascript
Copy
Download
// Middleware de autenticación
function checkAuth(req, res, next) {
  const isLoggedIn = true; // En un caso real, verificaría con sesiones/JWT
  if (isLoggedIn) {
    next(); // Usuario autenticado, continuar
  } else {
    res.redirect('/login'); // Redirigir al login
  }
}

// Ruta protegida (dashboard)
app.get('/dashboard', checkAuth, (req, res) => {
  res.render('dashboard');
});

4. Manejo de Formularios (POST)

Para procesar datos de formularios (necesitarás express.urlencoded):

javascript
Copy
Download
app.use(express.urlencoded({ extended: true })); // Parsear datos de formularios

// Ruta para mostrar el formulario
app.get('/contact', (req, res) => {
  res.render('contact');
});

// Ruta para procesar el formulario
app.post('/contact', (req, res) => {
  const { name, email } = req.body;
  console.log(`Datos recibidos: ${name}, ${email}`);
  res.redirect('/thank-you');
});

// Página de agradecimiento
app.get('/thank-you', (req, res) => {
  res.render('thank-you');
});

📌 Ejemplo de contact.ejs:

html
Copy
Download
Run
<form action="/contact" method="POST">
  <input type="text" name="name" placeholder="Nombre">
  <input type="email" name="email" placeholder="Email">
  <button type="submit">Enviar</button>
</form>

5. Manejo de Errores (404 y Redirecciones)

🔹 Página 404 (Ruta no encontrada)

javascript
Copy
Download
app.use((req, res) => {
  res.status(404).render('404', { title: 'Página no encontrada' });
});

🔹 Redirecciones

javascript
Copy
Download
app.get('/old-page', (req, res) => {
  res.redirect(301, '/new-page'); // Redirección permanente
});

6. Organización Avanzada con express.Router()

Para escalar la aplicación, separa las rutas en archivos:

routes/auth.js

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

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

router.post('/login', (req, res) => {
  // Lógica de autenticación
  res.redirect('/dashboard');
});

module.exports = router;

En app.js:

javascript
Copy
Download
const authRoutes = require('./routes/auth');
app.use('/auth', authRoutes); // Todas las rutas empiezan con /auth

🚀 Conclusión

Con Express.js, puedes construir aplicaciones web robustas manejando:
✔ Renderizado de vistas (EJS, Pug, Handlebars).
✔ Rutas dinámicas (parámetros en URLs).
✔ Autenticación y protección de rutas.
✔ Formularios y redirecciones.
✔ Estructura modular con Router.



Diferencia entre app.get() y app.use() en Express.js

Cuando trabajamos con Express.js, dos métodos fundamentales para manejar rutas y middleware son app.get() y app.use(). Aunque ambos se usan para gestionar solicitudes, tienen propósitos distintos. Vamos a explicarlos con ejemplos prácticos.

1. app.get(): Manejo de rutas específicas (GET)

Este método se utiliza para definir rutas que responden solo a solicitudes HTTP GET en un path específico.

Ejemplo: Respuesta con un string

javascript
Copy
Download
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Mi respuesta desde Express');
});

app.listen(port, () => {
  console.log('Servidor en puerto', port);
});

  • Si accedes a http://localhost:3000/, Express responderá con el mensaje definido.

  • No funcionará para POST, PUT u otros métodos HTTP.

2. app.use(): Middleware y archivos estáticos

Este método se usa para:

  • Middleware: Funciones que se ejecutan en cada solicitud (ej: express.json()).

  • Servir archivos estáticos: Como HTML, CSS, JS, imágenes, etc.

Ejemplo: Configurar carpeta public/

Estructura de proyecto:

Copy
Download
mi-app/
├── public/          
│   ├── css/style.css
│   ├── js/app.js
│   ├── 404.html
│   └── index.html
javascript
Copy
Download
app.use(express.static(__dirname + "/public"));

  • Acceso directo: Los archivos en public/ se sirven directamente.

    • http://localhost:3000/404.html → muestra 404.html.

    • http://localhost:3000/css/style.css → sirve el archivo CSS.

¿Qué pasa si hay un index.html?

Si existe public/index.html y el middleware express.static está antes de app.get('/'), Express priorizará el archivo estático:

javascript
Copy
Download
app.use(express.static(__dirname + "/public")); // Se ejecuta primero

app.get('/', (req, res) => {
  res.send('Este mensaje NO se verá'); // ¡No se ejecuta!
});

  • Al visitar http://localhost:3000/, se mostrará index.html en lugar del mensaje de app.get().

Diferencias clave

app.get()app.use()
Solo maneja solicitudes GET.Maneja todas las solicitudes (GET, POST, etc.).
Se usa para rutas específicas (/, /users).Se usa para middleware o archivos estáticos.
Más restrictivo.Más flexible (ejecuta en todas las rutas a menos que se limite).

Conclusión

  • Usa app.get() para rutas específicas con el método GET.

  • Usa app.use() para middleware o servir archivos estáticos.

  • El orden de declaración importa: si express.static está antes que app.get('/'), Express priorizará los archivos estáticos.

¡Experimenta con estos ejemplos y refuerza tu entendimiento de Express! 


Ejemplo 2: Rutas modularizadas

Si tienes rutas definidas en otro archivo (ej: RutasWeb.js), puedes usarlas con app.use():

javascript
Copy
Download
// Importar y usar rutas externas
app.use('/', require('./router/RutasWeb'));

  • Ventaja: Organiza mejor el código.

  • Comportamiento: Todas las rutas definidas en RutasWeb.js se montan bajo /.

Diferencias clave

app.get()app.use()
Solo maneja solicitudes GET.Maneja todas las solicitudes (GET, POST, etc.).
Para rutas específicas (/, /users).Para middleware, archivos estáticos o rutas modularizadas.
Más restrictivo.Más flexible (se ejecuta en todas las rutas a menos que se limite).

Conclusión

  • Usa app.get() para rutas específicas con el método GET.

  • Usa app.use() para:

    • Middleware (ej: express.json()).

    • Archivos estáticos (express.static).

    • Rutas modularizadas (ej: app.use('/', require('./router/RutasWeb'))).

¡El orden importa! Si express.static o un middleware está antes que app.get('/'), Express priorizará lo declarado primero.

Bonus: Ejemplo de RutasWeb.js

Para que funcione app.use('/', require('./router/RutasWeb')), el archivo RutasWeb.js debe exportar un router de Express:

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

router.get('/', (req, res) => {
  res.send('Ruta principal desde RutasWeb');
});

router.get('/about', (req, res) => {
  res.send('Acerca de nosotros');
});

module.exports = router;

¡Espero que esta ampliación te sea útil

Comentarios

Publicar un comentario

Entradas más populares de este blog

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

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