Laravel 5.4 - Mix - How to run browser live reload

laravel laravel-mix laravel-elixir
Selim Mahmud picture Selim Mahmud · Feb 5, 2017 · Viewed 25.3k times · Source

I am using Laravel 5.4 in my project and trying to set up the frontend build system using Mix. Everything is working fine except I could not be able to get browser auto reload option. There is nothing about it on documentation.

Someone please help, how can I achieve that?

Answer

Edu Ruiz picture Edu Ruiz · Feb 7, 2017

Important update!

forget about what I said before, now laravel mix is updated and with some improvements in the functionality and the documentation.

now you can simple:

mix.browserSync('my-domain.dev');

// Or:

mix.browserSync({
    proxy: 'my-domain.dev'
})

and then npm run watch and you are good to go!

if you want to update your webpack version, change the version on the package.json to *:

"laravel-mix": "*",

and run npm update laravel-mix.

please check the mix updated documentation on github

Important update end

according to the documentation you just need to run npm run hot on your project and in your script or style-sheet reference use:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

so the mix() function will point your assets url to http://localhost:8080/.

buuuuuuuut... That's just what the documentation say as you can see here. I can't make it work on a laravel fresh install running arch linux, everything compiles as it should and the mix() function are pointing to 8080 but nothing is injected, I'm back in Ctrl+R age.

hope you have more luck!

Related questions

Combining Multiple Files with Laravel Mix

I am currently in the process of diving into Laravel Mix and so far, whilst I fully understand what Laravel Mix is and how it works, I am trying to understand a little more about the common practices and 'How-Tos'... …

Read More
How can I change the public path to something containing an underscore in Laravel Mix?

In Laravel 5.4 Mix was introduced to compile assets and maintain the asset pipeline. Mix defaults to your public directory being named public. In many cases, including mine, my public directory is called something else. In my case, it's public_html. …

Read More
Laravel Mix "sh: 1: cross-env: not found error"

I have been trying to setup laravel mix on my project and followed the install guide on the laravel website however keep getting errors. My package.json file is { "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules", "…

Read More