Solucionar la Carga de Assets de Laravel Vite desde el Servidor de Desarrollo en Producción – Guía Completa
Desplegar una aplicación Laravel con Vite puede generar problemas inesperados. Uno de los dolores de cabeza más comunes es cuando tu sitio de producción intenta cargar assets desde localhost:5173, en lugar de los archivos compilados de /public/build.
Si tu sitio se rompe en producción por esto, no te preocupes — esta guía proporciona una solución real probada en múltiples despliegues. Al final, no solo resolverás el problema sino que también configurarás un flujo de trabajo confiable que asegure que nunca vuelva a suceder.
Entendiendo el Problema
Al trabajar localmente, Laravel con Vite usa un servidor de reemplazo de módulos en caliente (HMR) que corre en http://localhost:5173. Esto hace el desarrollo rápido y eficiente, con actualizaciones instantáneas del navegador.
Pero aquí está el problema:
- En producción, tu servidor no ejecuta este servidor de desarrollo.
- En su lugar, debería servir los assets pre-compilados dentro de
/public/build. - Si ves referencias como esta en producción:
<link rel="stylesheet" href="http://localhost:5173/resources/css/app.css">
en lugar de:
<link rel="stylesheet" href="https://yourdomain.com/build/assets/app-xxxx.css">
…significa que Laravel sigue intentando usar el servidor de desarrollo hot reload.
¿El culpable?
Un archivo public/hot residual que le dice a Laravel que siga usando localhost:5173.
Solución Rápida para Producción
Ejecuta estos comandos en tu servidor de producción:
cd /home/username/public_html
rm -f public/hot
php artisan config:clear
php artisan cache:clear
php artisan view:clear
✅ Esto elimina el archivo hot y limpia las cachés de Laravel.
✅ Una vez hecho, recarga tu sitio — debería usar inmediatamente los assets compilados.
Solución Permanente con Flujo de Trabajo de Despliegue
Arreglar manualmente está bien una vez. Pero si despliegas frecuentemente, querrás automatización.
Paso 1 – Actualizar .gitignore
Asegúrate de que public/build no esté ignorado, ya que necesitas los assets compilados en producción:
# Mantener carpeta build en el repo
!public/build
Paso 2 – Siempre Compilar Localmente
Dado que tu servidor de producción no tiene npm, compila assets antes de hacer push:
npm run build
git add .
git commit -m "Build assets for production"
git push origin main
Paso 3 – GitHub Actions para Despliegue
Actualiza tu flujo de trabajo de GitHub Actions para:
- Desplegar código
- Eliminar
public/hot - Limpiar cachés
Ejemplo de fragmento del workflow:
- name: Remove hot file
run: rm -f public/hot
- name: Clear Laravel caches
run: |
php artisan config:clear
php artisan cache:clear
php artisan view:clear
Mejores Prácticas – Hacer y No Hacer
✅ Hacer:
- Ejecutar
npm run buildantes de desplegar - Commitear
/public/builden tu repositorio - Automatizar la limpieza de caché
❌ No hacer:
- Ejecutar
npm run deven producción - Commitear
public/hot - Olvidar compilar antes de hacer push
Flujo de Trabajo de Despliegue Típico
Así debería verse tu ciclo desarrollo → producción:
# Desarrollo local
npm run dev
# Antes del despliegue
npm run build
git add .
git commit -m "Production build"
git push origin main
Tu pipeline CI/CD (GitHub Actions, Forge, etc.) se encarga del resto.
Resultados para los Clientes
Al solucionar este problema, los clientes obtienen:
- Un sitio de producción completamente funcional sin CSS/JS rotos.
- Confianza de que los despliegues no se romperán de nuevo.
- Flujo de trabajo optimizado para proyectos Laravel + Vite.
- Menos tiempo de inactividad, que impacta directamente la experiencia del usuario y las conversiones.
Esto construye confianza en tu expertise y asegura clientes recurrentes.
Preguntas Frecuentes
P1: ¿Por qué Laravel carga assets desde localhost:5173 en producción?
Porque el archivo public/hot aún existe, haciendo que Laravel piense que debe usar el servidor de desarrollo.
P2: ¿Puedo solucionar esto sin GitHub Actions?
Sí. Elimina manualmente public/hot y recompila assets localmente antes de desplegar.
P3: ¿Necesito commitear /public/build?
Sí, ya que tu servidor de producción puede no tener Node/NPM.
P4: ¿Qué pasa si uso Laravel Forge o Vapor?
El mismo proceso aplica — siempre compila assets localmente y commitea /public/build.
P5: ¿Debería ejecutar alguna vez npm run dev en producción?
No, es solo para desarrollo local. Usa npm run build para producción.
P6: ¿Cómo sé si está solucionado?
Revisa el código fuente HTML de producción. Si las URLs de assets cargan desde /build/assets/… en lugar de localhost:5173, ¡está listo!
Conclusión
Solucionar los assets de Laravel Vite cargando desde el servidor de desarrollo en producción es sencillo una vez que conoces la causa raíz — el archivo public/hot. Con la solución rápida y un flujo de trabajo de despliegue robusto, asegurarás que los despliegues de producción siempre carguen los assets compilados correctos.
Esto no solo resuelve el problema inmediato sino que también te da un proceso a prueba de futuro que construye confianza con los clientes y mantiene los entornos de producción estables.
