No termino de entender Vite en producción (Laravel 10)

Publicado por Moisés Rubio Santos
hace 6 meses

Hola compañeros,

Estoy usando Laravel 10 junto con Vite y Tailwind,

La cuestión es que no entiendo el funcionamiento de Vite, cuando yo trabajo en local en el view meto esto :

@vite('resources/css/app.css') @vite('resources/js/app.js')

Y cuando estoy trabajando en local y he salido del dev me lo transforma en esto :

    <link rel="preload" as="style" href="public/build/assets/app-DpThY7-y.css" />
    <link rel="stylesheet" href="public/build/assets/app-DpThY7-y.css" />

    <link rel="modulepreload" href="public/build/assets/app-C8U8g3qI.js" />
    <script type="module" src="public/build/assets/app-C8U8g3qI.js"></script>

Que está genial porque es la ruta estatica de ese momento.

El tema es que cuando lo subo al servidor, lo que está cogiendo realmente es lo de vite y obviamente, pues no carga, tengo que estar yo manualmente modificando las rutas, estoy totalmente seguro que está no es la forma normal de trabajar y que algo estoy haciendo mal, pero no consigo encontrar la forma de trabajar en este caso.

Podríais iluminarme ??

Gracias!!

vite laravel vite laravel
Respuesta de Cristian Olaz
hace 6 meses

Hola Moisés,

Lo que ocurre es que Laravel utiliza el archivo /public/hot para modificar esas rutas que indicás.

Cuando estás trabajando en tu entorno local y ejecutás el comando npm run dev vas a ver que se crea un archivo en /public/hot con tu url local. Y cuando cortás ese comando (ctrl+C) el archivo se elimina.

Entonces verificando la existencia de ese archivo Laravel sabe si estás ejecutando npm run dev y por lo tanto asume que estás en el entorno local.

Por otro lado cuando el archivo /public/hot no existe, Laravel intenta incluir los recursos desde la carpeta /public/build. Para que esto funcione tendrías que ejecutar primero npm run build. Pero ocurre que si por ejemplo estás usando git, esta carpeta no está incluída en el seguimiento (ver archivo .gitignore). Entonces en producción además de descargar tu proyecto también deberías compilarlo:

git clone https://...
npm run build

En resumen así es como se ve la carpeta /public mientras trabajas en tu entorno local:

/public
    index.php
    hot
    ...

Y así se vería cuando pasás a producción:

/public
    index.php
    build/
    ...

En tu archivo .blade tendrías que dejar las directivas @vite tal como las escribiste, y luego en la carpeta public asegurate de que existe el archivo hot para tu entorno local, y la carpeta build para producción.

Espero que te sirva. Saludos,

Respuesta de Moisés Rubio Santos
hace 6 meses

Compañero, no se podría explicar mejor.

Desconocía por ejemplo el archivo hot, no he sido capaz de encontrar eso en la documentación ni en los videotutoriales que he visto (Udemy).

Espectacular, ya funciona como esperaría que funcionase para no tener que estar cambiando rutas manualmente que me parecía imposible que esa fuese la forma de trabajar.

Una vez mas, muchísimas gracias Cristian.

Respuesta de Cristian Olaz
hace 6 meses

Qué bueno que te haya funcionado Moisés!

Un saludo,