Laravel 5.4 - Mix - How to run browser live reload

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!

You still can use browser-sync.Laravel 5.4 shipped with webpack and there is a plugin for it : browser-sync-webpack-plugin.

1. Install browser-sync's stuff:

   npm install --save-dev browser-sync browser-sync-webpack-plugin

2. Add to the webpack.mix.js:

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');mix.webpackConfig({   plugins: [       new BrowserSyncPlugin({           files: [               'app/**/*',               'public/**/*',               'resources/views/**/*',               'routes/**/*'           ]       })   ]});

3. Add this snippet at the bottom of your page right before </body>:

   @if (getenv('APP_ENV') === 'local')<script id="__bs_script__">//<![CDATA[    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.6'><\/script>".replace("HOST", location.hostname));    //]]></script>@endif

4. Start both, Laravel and webpack-dev-server:

   php artisan serve & npm run watch

Yes I've been having the same issue I would say stick to elixir because if you look at the github its a complete mess. There's issues with loading fonts from bootstrap, issues with combining method streams, too many issues to even go into detail. It's just too new and they didn't fix all the issues.

My 2 cents on this is if you are going to upgrade to something new atleast make sure whatever worked on elixir out the box is on mix.