Servidor de desarrollo moderno con Vite y pnpm

Cuando trabajamos en proyectos web con HTML, CSS y JavaScript, se necesita un servidor local que sea rápido, confiable y que refleje los cambios inmediatamente mientras se escribe código.

Después de probar opciones como http-server y live-server, en mis pruebas, Vite mostró un comportamiento más confiable durante el desarrollo, ya que detecta y refleja los cambios en los archivos de forma inmediata.

Paso 1. Instalar Vite usando pnpm

Primero, asegúrate de tener pnpm instalado. Luego instala Vite como dependencia de desarrollo:

pnpm add -D vite

Paso 2. Configurar el script del servidor

En tu archivo package.json, agrega el siguiente script:

"scripts": {
  "dev": "vite ./public/ --host --port=8080"
}

Con esta configuración:

• ./public/ es la carpeta desde donde se sirven los archivos
• --host permite acceder desde otros dispositivos en la red
• --port=8080 define el puerto del servidor

Paso 3. Ejecutar el servidor de desarrollo

Simplemente ejecuta:

pnpm dev

Acceso desde otros dispositivos

Gracias a --host, puedes acceder desde otros equipos o móviles usando la IP de tu máquina: http://TU_IP_LOCAL:8080

¿Cuándo usar Vite?

Vite es ideal cuando:

• Estás desarrollando HTML, CSS y JS
• Compilas CSS o usas preprocesadores (por ejemplo, Tailwind CSS)
• Necesitas ver cambios inmediatos sin recargar manualmente
• Quieres un entorno moderno y rápido

Conclusión

Si buscas un servidor de desarrollo rápido, confiable y moderno, Vite es una excelente elección. No solo reemplaza a herramientas como live-server, sino que mejora notablemente la experiencia de desarrollo.

Una vez que lo pruebas, cuesta volver atrás 🚀

Fuentes

• vitejs.dev
• pnpm.io