TUTORIAL COMPLETO DE EXPRESS PARA DESARROLLO WEB
Introducción a Express
Express es un framework minimalista y flexible para Node.js que simplifica el desarrollo de aplicaciones web y APIs. Su popularidad radica en su capacidad para ofrecer un entorno rápido, ligero y sin opiniones estrictas sobre cómo estructurar una aplicación, a diferencia de frameworks como Rails o Django. Esto permite a los desarrolladores tener libertad en el diseño de sus proyectos mientras aprovechan un ecosistema robusto de módulos disponibles en npm. Este tutorial está diseñado para programadores con conocimientos básicos de HTML, CSS, JavaScript y Node.js, y busca proporcionar una guía completa para comenzar a trabajar con Express, desde la instalación hasta la creación de una aplicación funcional.
¿Qué es Express?
Express es un framework de Node.js que facilita la creación de aplicaciones web y APIs RESTful. Es conocido por su mínima configuración inicial, alto rendimiento y flexibilidad, lo que permite a los desarrolladores estructurar proyectos según sus necesidades. Desarrollado originalmente por TJ Holowaychuk, Express es ahora mantenido por la Fundación Node.js y la comunidad de código abierto. Su ecosistema de módulos npm permite extender sus funcionalidades fácilmente, integrando herramientas como motores de plantillas, middleware y más.
Para comenzar con Express, necesitas tener instalado Node.js y npm (Node Package Manager) en tu máquina. Puedes verificar la instalación ejecutando los siguientes comandos en la terminal:
node --version
npm --version
Si obtienes números de versión (por ejemplo, v20.17.0 para Node.js y 10.8.1 para npm, según versiones recientes al 2025), la instalación es correcta.
¿Por qué usar Express?
Express es una opción popular para desarrolladores por varias razones. Permite construir aplicaciones web de una sola página, multipágina o híbridas, así como APIs para clientes web o móviles. Incluye soporte para el patrón MVC (Model-View-Controller), un estándar en el desarrollo web, y es compatible con múltiples sistemas operativos. Además, aprovecha el modelo asíncrono y de un solo hilo de Node.js, lo que garantiza un alto rendimiento. Express también viene con un motor de plantillas predeterminado, Pug (anteriormente Jade), aunque soporta otros como EJS o Handlebars.
Creación de un proyecto con Express
Para iniciar un proyecto con Express, primero necesitas crear un directorio y un archivo package.json, que contendrá la información del proyecto y sus dependencias. Sigue estos pasos:
- Crea un directorio para tu proyecto y navega a él:
mkdir mi-app-express
cd mi-app-express
- Inicializa el proyecto con npm, generando un archivo package.json automáticamente:
npm init --yes
El archivo generado tendrá una estructura similar a esta:
{
"name": "mi-app-express",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"license": "ISC"
}
Instalación de Express
Con el archivo package.json creado, instala Express como dependencia del proyecto:
npm install --save express
Esto agrega Express al proyecto y actualiza el archivo package.json, añadiendo una sección de dependencias:
{
"name": "mi-app-express",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
}
}
También notarás que se crea una carpeta node_modules en el directorio raíz, donde se almacenan las dependencias instaladas.
Creación de un servidor básico con Express
Para probar Express, crea un archivo index.js en la raíz del proyecto con el siguiente código:
const express = require("express");
const app = express();
app.get("/", (req, res) => res.send("¡Hola, mundo!"));
app.listen(3000, () => console.log("Servidor escuchando en el puerto 3000"));
Ejecuta el servidor con:
node index.js
Abre un navegador y visita http://localhost:3000. Verás el mensaje “¡Hola, mundo!” en la pantalla. Este código demuestra los conceptos básicos de Express:
- require(’express’): Importa el módulo Express.
- app.get(’/’): Define una ruta GET para la raíz (/) que responde con un mensaje.
- app.listen(3000): Inicia el servidor en el puerto 3000.
El objeto req (request) contiene información sobre la solicitud HTTP, como parámetros, cuerpo y cabeceras. El objeto res (response) permite enviar respuestas al cliente.
Anatomía de una aplicación Express
Una aplicación Express típica se compone de varias partes esenciales:
Dependencias
Se importan módulos como Express usando require. Estas dependencias se instalan vía npm.
Instanciaciones
Se crea una instancia de Express con const app = express(), que manejará las solicitudes y respuestas.
Configuraciones
Se definen ajustes personalizados, como el motor de plantillas o la carpeta de vistas, usando app.set().
Middleware
Los middleware son funciones que procesan solicitudes antes de que lleguen a las rutas. Pueden modificar objetos req y res o terminar el ciclo de solicitud-respuesta.
Rutas
Las rutas definen los endpoints de la aplicación y las acciones asociadas a cada solicitud HTTP.
Arranque del servidor
El método app.listen() inicia el servidor y lo pone a escuchar en un puerto específico.
Rutas en Express
El enrutamiento define cómo responde la aplicación a las solicitudes de un cliente en un endpoint específico, que consta de un método HTTP (GET, POST, PUT, DELETE) y una URI. Por ejemplo:
app.get("/home", (req, res) => {
res.send("Página de inicio");
});
app.get("/about", (req, res) => {
res.send("Acerca de");
});
En este ejemplo, las rutas /home y /about responden con mensajes simples cuando se accede a ellas.
Métodos de enrutamiento
Express soporta todos los métodos HTTP estándar. Por ejemplo, una ruta POST:
app.post("/submit", (req, res) => {
res.send("Datos recibidos");
});
Parámetros de ruta
Los parámetros de ruta capturan valores dinámicos de la URL usando req.params. Por ejemplo:
app.get("/books/:bookId", (req, res) => {
res.send(`Libro ID: ${req.params.bookId}`);
});
Si accedes a http://localhost:3000/books/123, la respuesta será “Libro ID: 123”. Para manejar rutas inválidas, puedes usar un comodín:
app.get("*", (req, res) => {
res.send("404 - Página no encontrada");
});
Middleware en Express
Los middleware son funciones que se ejecutan en el ciclo de solicitud-respuesta, con acceso a req, res y next (una función que pasa el control al siguiente middleware). Un ejemplo de middleware personalizado:
app.use((req, res, next) => {
console.log(`Solicitud recibida a las ${Date.now()}`);
next();
});
Este middleware registra la hora de cada solicitud y llama a next() para continuar el flujo. Si no se incluye next(), la solicitud se detendría.
Middleware para rutas específicas
Puedes aplicar middleware a rutas específicas:
app.use("/home", (req, res, next) => {
console.log(`Solicitud en /home a las ${Date.now()}`);
next();
});
Este middleware solo se ejecuta para solicitudes a /home.
Middleware de terceros
Express soporta middleware de terceros que extienden su funcionalidad. Algunos comunes son:
body-parser
Procesa datos enviados en el cuerpo de las solicitudes, como formularios o JSON:
npm install body-parser
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
cookie-parser
Analiza las cabeceras de cookies y las almacena en req.cookies:
npm install cookie-parser
const cookieParser = require("cookie-parser");
app.use(cookieParser());
morgan
Registra información sobre las solicitudes HTTP:
npm install morgan
const logger = require("morgan");
app.use(logger("dev"));
Archivos estáticos
Express permite servir archivos estáticos (CSS, imágenes, etc.) usando el middleware express.static. Por ejemplo, para servir archivos desde una carpeta public:
app.use(express.static("public"));
Si tienes un archivo style.css en public/css, puedes acceder a él en http://localhost:3000/css/style.css. Para múltiples directorios estáticos:
app.use(express.static("public"));
app.use(express.static("files"));
También puedes usar un prefijo virtual:
app.use("/static", express.static("public"));
Esto hace que los archivos estén disponibles bajo /static, como http://localhost:3000/static/css/style.css.
Motores de plantillas
Los motores de plantillas permiten generar HTML dinámico. Express es compatible con motores como Pug, EJS y Handlebars. Pug es el motor predeterminado. Para usarlo, instálalo:
npm install pug
Configura Pug en tu aplicación:
app.set("view engine", "pug");
app.set("views", "./views");
Crea un archivo views/index.pug:
doctype html
html
head
title= title
body
h1= message
Define una ruta para renderizar la plantilla:
app.get("/", (req, res) => {
res.render("index", {
title: "Saludo desde Pug",
message: "¡Hola, mundo!",
});
});
Al visitar http://localhost:3000, verás una página HTML renderizada con el título y mensaje proporcionados. Pug simplifica la escritura de HTML al eliminar la necesidad de cerrar etiquetas.
Estructura de un proyecto Express
Express no impone una estructura específica, pero una organización común basada en el patrón MVC es la siguiente:
mi-app-express/
├── node_modules/ // Dependencias instaladas
├── config/
│ ├── db.js // Configuración de base de datos
│ ├── credentials.js // Claves de APIs externas
│ ├── config.js // Variables de entorno
├── models/ // Esquemas de base de datos
│ ├── books.js
│ ├── users.js
├── routes/ // Rutas de la aplicación
│ ├── books.js
│ ├── users.js
├── views/ // Plantillas Pug
│ ├── index.pug
│ ├── 404.pug
├── public/ // Archivos estáticos
│ ├── css/
│ ├── images/
│ ├── js/
├── app.js // Archivo principal
├── routes.js // Importa todas las rutas
├── package.json
En esta estructura, app.js es el archivo principal que configura la aplicación y carga las rutas desde routes.js. Los modelos y rutas se separan para mantener el código organizado y escalable.
Conclusiones
Express es una herramienta poderosa y flexible para el desarrollo de aplicaciones web y APIs en Node.js. Su diseño minimalista permite a los desarrolladores construir proyectos rápidamente, integrando middleware, motores de plantillas y rutas según las necesidades. A lo largo de este tutorial, hemos explorado cómo instalar Express, crear un servidor básico, definir rutas, usar middleware, servir archivos estáticos y trabajar con plantillas como Pug. La estructura de proyecto recomendada, basada en MVC, facilita la escalabilidad y el mantenimiento. Con Express, puedes aprovechar el ecosistema de npm para extender las funcionalidades y crear aplicaciones robustas con un enfoque moderno y eficiente.