Saltar al contenido principal

Visión general de Express.js.

Introducción​

Express.js es un framework de aplicaciones web rápido y minimalista para Node.js. Proporciona una forma simple y poderosa de construir aplicaciones web y APIs. Con su sólido conjunto de características y sintaxis fácil de usar, Express.js se ha convertido en uno de los frameworks de desarrollo web más populares.

Historia​

Express.js fue creado por TJ Holowaychuk y lanzado en 2010. Fue diseñado como una alternativa liviana a los frameworks más complejos y ricos en características disponibles en ese momento. Desde su lanzamiento, Express.js ha ganado una gran y activa comunidad de desarrolladores, convirtiéndolo en una opción principal para construir aplicaciones web en Node.js.

Características​

  1. Enrutamiento: Express.js te permite definir rutas para manejar diferentes solicitudes HTTP. Aquí tienes un ejemplo de una ruta básica que responde con "¡Hola, Mundo!" cuando se realiza una solicitud GET a la URL raíz ("/"):
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('¡Hola, Mundo!');
});

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

Cuando ejecutas este código y visitas http://localhost:3000 en tu navegador, verás el mensaje "¡Hola, Mundo!".

  1. Middleware: Express.js utiliza funciones middleware para manejar solicitudes y realizar tareas adicionales. Las funciones middleware se pueden utilizar para tareas como registro, autenticación y manejo de errores. Aquí tienes un ejemplo de una función middleware que registra la URL de cada solicitud:
const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log(`Solicitud recibida: ${req.url}`);
  next();
});

app.get('/', (req, res) => {
  res.send('¡Hola, Mundo!');
});

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

Cuando ejecutas este código y realizas una solicitud a cualquier URL, el servidor registrará la URL en la consola.

  1. Motores de plantillas: Express.js admite varios motores de plantillas, como EJS y Pug, para renderizar páginas HTML dinámicas. Aquí tienes un ejemplo de cómo usar el motor de plantillas EJS para renderizar una página dinámica:
const express = require('express');
const app = express();

app.set('view engine', 'ejs');

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

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

Crea un archivo llamado index.ejs en un directorio llamado views y agrega el siguiente contenido:

<html>
  <head>
    <title>Hola, <%= name %></title>
  </head>
  <body>
    <h1>Hola, <%= name %></h1>
  </body>
</html>

Cuando ejecutas este código y visitas http://localhost:3000, verás una página que dice "Hola, John".

  1. Archivos estáticos: Express.js te permite servir archivos estáticos, como archivos CSS y JavaScript, directamente desde un directorio. Aquí tienes un ejemplo de cómo servir archivos estáticos desde un directorio llamado public:
const express = require('express');
const app = express();

app.use(express.static('public'));

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

Coloca tus archivos estáticos (por ejemplo, un archivo CSS llamado styles.css) en el directorio public. Luego puedes hacer referencia al archivo estático en tu HTML de la siguiente manera:

<link rel="stylesheet" href="/styles.css">
  1. Manejo de errores: Express.js proporciona middleware para manejar errores que ocurren durante el procesamiento de solicitudes. Aquí tienes un ejemplo de un middleware de manejo de errores que registra un mensaje de error y envía una página de error personalizada:
const express = require('express');
const app = express();

app.get('/', (req, res, next) => {
  const error = new Error('Algo salió mal');
  next(error);
});

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('¡Algo se rompió!');
});

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

Cuando visitas http://localhost:3000, se lanzará un error y el middleware de manejo de errores registrará el error y enviará una respuesta con el mensaje "¡Algo se rompió!".

Para obtener información más detallada y ejemplos, puedes consultar la documentación oficial de Express.js en expressjs.com.

Ejemplos​

  1. Servidor básico de Express.js:
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('¡Hola, Mundo!');
});

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

Este ejemplo crea un servidor básico de Express.js que escucha en el puerto 3000 y responde con "¡Hola, Mundo!" cuando se realiza una solicitud GET a la URL raíz ("/").

  1. Uso de Middleware:
const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log(`Solicitud recibida: ${req.url}`);
  next();
});

app.get('/', (req, res) => {
  res.send('¡Hola, Mundo!');
});

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

Este ejemplo demuestra el uso de middleware en Express.js. La función middleware registra la URL de cada solicitud antes de pasarla al siguiente controlador.

  1. Renderización de páginas dinámicas:
const express = require('express');
const app = express();

app.set('view engine', 'ejs');

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

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

En este ejemplo, se utiliza el motor de plantillas EJS para renderizar una página HTML dinámica. El archivo de plantilla index.ejs recibe una variable name y muestra un saludo personalizado.

  1. Servir archivos estáticos:
const express = require('express');
const app = express();

app.use(express.static('public'));

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

Este ejemplo muestra cómo servir archivos estáticos (por ejemplo, CSS, JavaScript) desde el directorio public. Los archivos estáticos se pueden hacer referencia en HTML utilizando sus rutas relativas.

  1. Manejo de errores:
const express = require('express');
const app = express();

app.get('/', (req, res, next) => {
  const error = new Error('Algo salió mal');
  next(error);
});

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('¡Algo se rompió!');
});

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

En este ejemplo, se lanza intencionalmente un error al visitar la URL raíz. El middleware de manejo de errores registra la traza de error y envía una respuesta de error personalizada con el mensaje "¡Algo se rompió!".

Estos ejemplos brindan una idea del poder y la flexibilidad de Express.js. Puedes explorar más características y funcionalidades consultando la documentación oficial y experimentando con diferentes fragmentos de código.