Un servidor pequeño con Express

Construye tu propio servidor en Node.js y Express. Tu primera API responde a su primera petición.

Te lo muestro: montar un servidor

Express es el paquete más popular para construir servidores en Node.js – convierte el trabajo en unas pocas líneas. Un servidor es un proyecto aparte, separado de la app React (recuerda: frontend y backend son dos mitades). En la terminal:

cd Desktop
mkdir my-server
cd my-server
npm init -y
npm install express

mkdir crea una carpeta (make directory),
npm init -y monta un proyecto Node.js nuevo (crea package.json),
npm install express descarga Express.

Abre la carpeta en VS Code y crea un archivo llamado server.js:

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

// When someone sends a GET to /api/hello, respond
app.get("/api/hello", (request, response) => {
  response.json({ message: "Hi! This is your own server. 🎉" });
});

app.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

Ejecútalo:

node server.js

Y abre http://localhost:3900/api/hello en el navegador. ¿Ves la respuesta JSON? Acabas de construir un servidor. Sin magia – 10 líneas.

Qué pasa en el código:

require("express") – pedir prestado un paquete (la versión servidor de import).
app.get("/api/hello", ...) – “responde a peticiones GET en esta dirección.” Ese par de dirección + respuesta se llama endpoint.
response.json({...}) – devolver JSON.
app.listen(3900) – escuchar en el puerto 3900. (Vite corre en 3901, el servidor en 3900 – dos programas no pueden escuchar en el mismo puerto.)

Paras el servidor con Ctrl+C. Y ojo: tras cada cambio de código, hay que pararlo y arrancarlo otra vez – un servidor no es Vite, no se actualiza solo.

Te lo muestro: un servidor con datos

Un servidor suele entregar datos. Añade un segundo endpoint encima de listen:

const results = [
  { opponent: "Lakeside", score: "3:1", home: true },
  { opponent: "Northgate", score: "2:2", home: false },
  { opponent: "Elmwood", score: "4:0", home: true },
];

app.get("/api/results", (request, response) => {
  response.json(results);
});

Reinicia el servidor y abre http://localhost:3900/api/results – tus datos, servidos por una API. Así funciona toda web grande (solo que con base de datos en lugar de un array).

Ahora tú 💪

Haz funcionar un servidor siguiendo la guía.
Añade un endpoint con datos de tu proyecto: 🏫 /api/menu (un array de comidas de la semana) · 🙋 /api/favorites (tus mejores juegos/libros) · 🌍 /api/trips (una lista de viajes) · ⚽ /api/results (resultados de partidos).
Añade un endpoint divertido /api/random que devuelva un mensaje distinto cada vez:

const messages = ["We're winning today!", "Practice at 5 PM!", "Let's go, Eagles!"];

app.get("/api/random", (request, response) => {
  const random = messages[Math.floor(Math.random() * messages.length)];
  response.json({ message: random });
});

Prueba todos los endpoints en el navegador – y luego prueba a llamar a uno con fetch() desde la consola, como aprendiste en la lección anterior.

⚠️

“Cannot GET /api/…” significa que el endpoint no existe – comprueba un error tipográfico en la dirección y si reiniciaste el servidor tras cambiarlo. “EADDRINUSE” significa que el puerto 3900 ya está en uso – probablemente tienes un servidor viejo en otra terminal; búscalo y páralo (Ctrl+C).

✅

Compruébalo tú: Tu servidor corre en el puerto 3900 y responde en varios endpoints con tus propios datos JSON. Conoces el frontend, empiezas con el backend – solo falta conectarlos. Lo haremos en la siguiente lección con un libro de visitas.

Lo que te llevas de esta lección

Un servidor en Express: npm init -y, npm install express, node server.js, parar con Ctrl+C, reiniciar tras cada cambio.
Un endpoint = una dirección + una respuesta: app.get("/api/something", (request, response) => response.json(...)).
El frontend (3901) y el backend (3900) son dos programas en dos puertos.