Cómo empezar con Node.js y Express

Introducción

Express es un marco de aplicación web para Node.js que te permite crear APIs y servidores web robustos de una manera mucho más fácil y limpia. Es un paquete ligero que no oculta las características principales de Node.js.

En este artículo, instalarás y usarás Express para construir un servidor web.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Este tutorial fue verificado con Node v15.14.0, npm v7.10.0, express v4.17.1 y serve-index v1.9.1.

Paso 1 — Configuración del Proyecto

Primero, abre tu ventana de terminal y crea un nuevo directorio de proyecto:

mkdir express-example

Luego, navega hasta el directorio recién creado:

cd express-example

En este punto, puedes inicializar un nuevo proyecto npm:

npm init -y

A continuación, deberás instalar el paquete express:

npm install express@4.17.1

En este punto, tienes un nuevo proyecto listo para usar Express.

Paso 2 — Creación de un Servidor Express

Ahora que Express está instalado, crea un nuevo archivo server.js y ábrelo con tu editor de código. Luego, agrega las siguientes líneas de código:

const express = require('express');

const app = express();

La primera línea aquí está obteniendo el módulo principal de Express del paquete que instalaste. Este módulo es una función, que luego ejecutamos en la segunda línea para crear nuestra variable app. Puedes crear múltiples aplicaciones de esta manera, cada una con sus propias solicitudes y respuestas.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

Estas líneas de código son donde le indicamos a nuestro servidor Express cómo manejar una solicitud GET a nuestro servidor. Express incluye funciones similares para POST, PUT, etc. utilizando app.post(...), app.put(...), etc.

Estas funciones toman dos parámetros principales. El primero es la URL para que esta función actúe. En este caso, estamos apuntando a '/', que es la raíz de nuestro sitio web: en este caso, localhost:3000.

El segundo parámetro es una función con dos argumentos: req y res. req representa la solicitud que se envió al servidor; Podemos usar este objeto para leer datos sobre lo que el cliente está solicitando hacer. res representa la respuesta que enviaremos de vuelta al cliente.

Aquí, estamos llamando a una función en res para enviar una respuesta de vuelta: 'Respuesta exitosa.'.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Finalmente, una vez que hemos configurado nuestras solicitudes, ¡debemos iniciar nuestro servidor! Estamos pasando 3000 en la función listen, que le indica a la aplicación en qué puerto escuchar. La función pasada como segundo parámetro es opcional y se ejecuta cuando el servidor se inicia. Esto nos proporciona retroalimentación en la consola para saber que nuestra aplicación está en ejecución.

Vuelve a tu ventana de terminal y ejecuta tu aplicación:

node server.js

Luego, visita localhost:3000 en tu navegador web. Tu ventana del navegador mostrará: 'Respuesta exitosa'. Tu ventana de terminal mostrará: 'La aplicación de ejemplo está escuchando en el puerto 3000.'.

¡Y ahí lo tienes, un servidor web! Sin embargo, definitivamente queremos enviar más que solo una línea de texto al cliente. ¡Veamos brevemente qué es el middleware y cómo configurar este servidor como un servidor de archivos estáticos!

Paso 3 — Usando Middleware

Con Express, podemos escribir y usar funciones de middleware, que tienen acceso a todas las solicitudes HTTP que llegan al servidor. Estas funciones pueden:

• Ejecutar cualquier código.
• Hacer cambios en los objetos de solicitud y respuesta.
• Finalizar el ciclo de solicitud-respuesta.
• Llamar a la siguiente función de middleware en la pila.

Podemos escribir nuestras propias funciones de middleware o usar middleware de terceros importándolos de la misma manera que lo haríamos con cualquier otro paquete.

Vamos a empezar escribiendo nuestro propio middleware, luego intentaremos usar algunos middleware existentes para servir archivos estáticos.

Para definir una función de middleware, llamamos a app.use() y le pasamos una función. Aquí hay una función de middleware básica para imprimir la hora actual en la consola durante cada solicitud:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

La llamada a next() indica al middleware que pase a la siguiente función de middleware si la hay. Es importante incluir esto al final de nuestra función, de lo contrario, la solicitud quedará atascada en este middleware.

Opcionalmente, podemos pasar una ruta al middleware, que solo manejará solicitudes a esa ruta. Por ejemplo:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Al pasar '/request-type' como el primer argumento a app.use(), esta función se ejecutará solo para solicitudes enviadas a localhost:3000/request-type.

Vuelve a tu ventana de terminal y ejecuta tu aplicación:

node server.js

Luego, visita localhost:3000/request-type en tu navegador web. Tu ventana de terminal mostrará la marca de tiempo de la solicitud y 'Tipo de solicitud: GET'.

Ahora, intentemos usar middleware existente para servir archivos estáticos. Express viene con una función de middleware integrada: express.static. También usaremos una función de middleware de terceros, serve-index, para mostrar una lista de índice de nuestros archivos.

Primero, dentro de la misma carpeta donde se encuentra el servidor express, crea un directorio llamado public y coloca algunos archivos dentro.

Entonces, instala el paquete serve-index:

npm install serve-index@1.9.1

Primero, importa el paquete serve-index en la parte superior del archivo del servidor.

Luego, incluye los middlewares express.static y serveIndex y diles la ruta de acceso y el nombre del directorio:

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Ahora, reinicia tu servidor y navega a localhost:3000/public. ¡Se te presentará un listado de todos tus archivos!

Conclusión

En este artículo, instalaste y utilizaste Express para construir un servidor web. También utilizaste funciones de middleware integradas y de terceros.

Continúa tu aprendizaje con Cómo Usar el Objeto req en Express, Cómo Usar el Objeto res en Express, y Cómo Definir Rutas y Métodos de Solicitud HTTP en Express.