Servir HTML
Sirve páginas web reales desde tu servidor
⏱ Estim. ~10 min
01 · Leer
Por ahora tu servidor devuelve texto plano y JSON. Pero cuando visitas sitios web reales, ves páginas con estilo, encabezados, imágenes y layout — no texto crudo.
Eso es porque los servidores web reales sirven archivos HTML. HTML es el lenguaje que los navegadores entienden y usan para mostrar contenido rico con formato.
En vez de poner el HTML dentro de tu código JavaScript (que se vuelve un desastre rápido), vamos a poner los archivos HTML en una carpeta especial y decirle a Express que los sirva automáticamente. Esto se llama servir archivos estáticos — archivos que no cambian según la petición, se mandan tal cual.
Puntos clave
- Los archivos estáticos se sirven tal cual, sin procesamiento
- La carpeta public/ es la convención para archivos accesibles públicamente
- Express puede servir toda una carpeta de archivos estáticos con una sola línea
- Así sirven CSS, imágenes y páginas HTML los sitios web reales
02 · Práctica real
Primero, crea un directorio public dentro de la carpeta de tu proyecto. Tus archivos estáticos (HTML, CSS, imágenes) van a vivir aquí.
mkdir public
03 · Práctica real
Crea un archivo index.html dentro de la carpeta public. Puedes hacerlo con un editor de texto — guárdalo como public/index.html dentro del directorio del proyecto. Esta va a ser la página de inicio de tu servidor.
<!DOCTYPE html>
<html>
<head>
<title>My First Server</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 50px auto; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Welcome to My Server</h1>
<p>This page is being served by Node.js and Express.</p>
<p>I built this myself.</p>
</body>
</html>04 · Quiz
¿Por qué ponemos los archivos HTML en una carpeta public/ en vez de dentro del código JavaScript?
- JavaScript no puede contener strings de HTML
- Para mantener las cosas organizadas — los archivos HTML se sirven tal cual, sin procesamiento
- La carpeta public/ es más rápida porque usa un servidor distinto
- Los navegadores solo pueden leer carpetas llamadas 'public'
05 · Práctica real
Ahora dile a Express que sirva los archivos de la carpeta public. Abre app.js y agrega esta línea después de const app = express(); y antes de todas tus rutas app.get(). Esta sola línea hace que cada archivo de la carpeta public/ esté disponible a través de tu servidor.
app.use(express.static('public'));06 · Práctica real
Detén el servidor (Ctrl+C), reinícialo y entra a http://localhost:3000 en el navegador. En vez del texto plano '¡Hello, World!', ahora deberías ver una página HTML con estilo, con un encabezado y párrafos. ¡Eso es tu index.html siendo servido!
node app.js
http://localhost:3000
07 · Completar
Para servir archivos estáticos desde una carpeta llamada 'public', agrega este middleware: app.use(express._____('public'))
Otras lecciones de este capítulo
⚠ La experiencia interactiva completa necesita JavaScript. Actívalo y vuelve a cargar la página.
※ Este es un proyecto educativo independiente — no es un producto oficial de Anthropic. Claude™ es una marca registrada de Anthropic, PBC.