Entorno de desarrollo rápido con http-server y live-server
Aprende a configurar un servidor local estático o con recarga automática para tus proyectos web usando npm.
En proyectos web simples es habitual necesitar un servidor local para probar HTML, CSS y JS de forma rápida y eficiente.
Dos opciones populares
http-server: Un servidor estático básico, ligero y sin configuraciones complejas.live-server: Un servidor ideal para desarrollo que incluye recarga automática (hot reload) al detectar cambios en los archivos.
En este post veremos cómo configurarlos para servir contenido desde la carpeta public/ usando npm.
1. Instalar los servidores
Para comenzar, instala ambos servidores como dependencias de desarrollo en tu proyecto:
npm install --save-dev http-server live-server
2. Scripts en package.json
Para facilitar el uso, agrega los siguientes comandos dentro de la sección “scripts” de tu archivo package.json:
"scripts": {
"serve-http": "http-server public -a 0.0.0.0 -p 8080 --cors",
"serve-live": "live-server public --host=0.0.0.0 --port=8080"
}
3. Ejecutar el servidor
Dependiendo de la herramienta que prefieras usar, ejecuta el comando correspondiente en tu terminal:
Usando http-server
npm run serve-http
Usando live-server
npm run serve-live
Acceso desde otros dispositivos
Si necesitas probar tu sitio desde otra máquina, un dispositivo móvil o una máquina virtual en la misma red, utiliza la dirección IP de tu equipo host o servidor local: http://127.0.0.0:8080
¿Cuál usar?
- http-server: Recomendado para servir archivos terminados o realizar pruebas rápidas sin procesos adicionales.
- live-server: La mejor opción durante la fase de codificación para ver los cambios en tiempo real sin refrescar el navegador manualmente.
