lines of HTML codes

Laradock Vite npm run dev

«npm run dev» ¿No funciona en Laradock?

Me tuve que cambiar de ambiente de trabajo. Aquí hablo mas sobre eso.

Laradock con npm run dev

Es un entorno de desarrollo que funciona con un docker-compose.yaml, ofrece muchas herramientas ya configuradas que funcionan en una misma red.

Pero no todo funciona a la primera, así que uno de los inconvenientes es que el comando npm run dev no se recompila al hacer cambios y tampoco se recarga la pagina con el nuevo contenido. Y esta característica es muy util cuando desarrollamos la parte de frontend en Laravel.

Solución

Las ultimas versiones usan Vite para JavaScript.

El archivo de configuración vite.config.js originalmente no incluye esta parte; así que lo agregaremos y configuramos segun la necesidad del proyecto. En este caso se muestra «localhost», pero este en si es el dominio de la app, regularmente el laravel usamos dominios virtuales. Si por ejemplo tu app es mywebsite.com, eso será lo que debes colocar en hmt.host

server: {
host: '0.0.0.0',
hmr: {
host: 'localhost o virtualhost'
},
},

El resultado debería verse como esto:

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
server: {
host: '0.0.0.0',
hmr: {
host: 'mywebsite.test',
},
},
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
'app/Forms/Components/**',
'app/Filament/**'
],
}),
],
})


No es necesario reiniciar los contenedores, ya que el cambio no es algo que afecte directamente a los contenedores sino que afectan unicamente a la app que estas desarrollando. Asi que deberías aplicar esto a otros proyectos.

Puede ser que si usas webpack también enfrentes el mismo inconveniente; ya hablaremos sobre eso en otra entrada.

fuente: https://laracasts.com/discuss/channels/inertia/cant-open-project-routes-after-npm-run-dev-in-laravel-vite-with-laradock


Publicado

en

, ,

Etiquetas:

Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *