El rol de Node.js en el Frontend

En el desarrollo Frontend moderno (con Astro, React, Vue, Angular, Svelte, etc.), la función de Node.js se limita al entorno de desarrollo (ordenador del desarrollador) y a los servidores de despliegue (CI/CD).

Básicamente, Node.js actúa como un motor de tus herramientas de trabajo. Sirve principalmente para tres cosas:

1. Ejecutar Gestores de Paquetes (usaremos pnpm): Permite instalar, actualizar y administrar librerías de terceros (como Tailwind, Axios, etc).
2. Brindar un Servidor de Desarrollo Local: Al usar el comando pnpm dev desde la terminal, Node.js levanta un servidor web local para que puedas ver los cambios en tiempo real mientras programas gracias a herramientas como Vite y su sistema de reemplazo de módulos en caliente (Hot Module Replacement).
3. Ejecutar herramientas de construcción (Bundlers/Compiladores): Herramientas como Vite o esbuild necesitan Node.js para ejecutarse. Son las encargadas de tomar un código moderno (TypeScript, JSX, CSS avanzado) y transformarlo en archivos HTML, JS y CSS simples que cualquier navegador web estándar pueda entender.

pnpm como gestor de paquetes

Si Node.js es el entorno de ejecución, pnpm es el administrador.

• Node.js es como el sistema de producción de una fábrica.
• pnpm es como el gerente que aprovisiona y gestiona los insumos de la fábrica.

¿Por qué pnpm?

En la actualidad (2026) pnpm tiene importantes ventajas sobre otros gestores tradicionales como npm o yarn:

• Velocidad y Espacio (El almacén global): A diferencia de npm, que duplica los archivos en la carpeta node_modules de cada proyecto, pnpm guarda todos los paquetes en un único lugar de tu disco duro (un almacén global). Así, si 10 proyectos usan React, pnpm solo lo descarga una vez y crea enlaces (hard links) en cada proyecto. Esto ahorra gigabytes de espacio en el disco duro del programador.
• Estructura estricta: pnpm evita que uses librerías que no has declarado explícitamente en el package.json. No declararlas causa un problema común en npm conocido como phantom dependencies (dependencias fantasmas).

Comandos esenciales de pnpm

• pnpm install: instala todas las dependencias declaradas de un proyecto.
• pnpm add [paquete] :Agrega una nueva librería al proyecto para producción.
• pnpm add -D [paquete] : Agrega una librería exclusiva para desarrollo (compiladores, linters, etc.).
• pnpm dev: arranca un servidor de desarrollo local.
• pnpm dlx: ejecuta binarios temporales sin instalarlos (como npx).

El stack de FrontEnd

Un stack de frontend es el conjunto de lenguajes, frameworks y herramientas que utilizamos para construir una interfaz web. En este curso iremos escalando de forma guiada para conformar nuestro stack:

• 1. HTML + CSS (TailwindCSS v4) + JS Vanilla + Vite
• 2. HTML + CSS (TailwindCSS v4) + JS Vanilla+Astro.build
• 3. HTML + CSS (TailwindCSS v4) + JS Vanilla+Astro.build+React

Entre proyecto y proyecto, practicaremos con Git, una herramienta de control de versiones que es diferente a Github, que es un repositorio.