DEV Community

Ariel Mejia for Devscamp

Posted on • Edited on

Configura hot reload en Laravel

Laravel Mix nos provee una opción llamada "BrowserSync", aquí veremos como configurarla para que cuando hagamos cambios en nuestras plantillas blade, la pestaña del navegador con nuestra aplicación, recargue automáticamente.

Modificar el archivo webpack.mix.js

Vamos a hacer uso de otra instancia de mix, abajo del codigo que ya esta presente:

mix.browserSync({
    'proxy': 'tuapp.test',
})
Enter fullscreen mode Exit fullscreen mode

Guardamos los cambios.

Ejecutamos el comando en la terminal

npm run watch
Enter fullscreen mode Exit fullscreen mode

Si no se ha realizado ningun comando previo como:

npm install
Enter fullscreen mode Exit fullscreen mode

El proceso tardara un poco mas pero apenas unos 20 o 30 segundos.

Nota

Si en este proyecto no se ha ejecutado el "watcher" con anterioridad, "npm" primero va a descargar todas las dependencias necesarias y nos solicitará que volvamos a ejecutar el mismo comando:

npm run watch
Enter fullscreen mode Exit fullscreen mode

Con esto podremos abrir nuestro proyecto y este recargara cada vez que realicemos algún cambio.

Espero les sea de utilidad el tip!

Top comments (2)

Collapse
 
dilakv profile image
dilakv

La línea es mix.browserSync({ 'proxy': 'miapp.test',})
Y generalmente debe instalarse:
yarn add browser-sync browser-sync-webpack-plugin

Collapse
 
arielmejiadev profile image
Ariel Mejia

Gracias por el comentario, snippet fixed, en cuanto al comando, no considere realmente necesario agregarlo, ya que mix automaticamente detecta si no esta instalado y te guía en la instalación, en lo cual no encontre valor en agregar algo que el mismo CLI te muestra.

Saludos