Laravel 5.4 - Mix - How to run browser live reload

Question

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?

Yokel

Look at my answer please. – Ern

Answer 1

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!

Choking

selim-mahmud (can't tag you) and @jayswager, please take a look at my update, things are working now. :) – Choking

Following the standard laravel docs and running npm update laravel-mix worked for me, thanks +1 – Turnout

Answer 2

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

Ern

how would one go about recompiling, or triggering gulp (elixir) after files in assets/js were touched? and can i put this config on my gulpfile instead? – Browne

Answer 3

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.

Duenna

I'm with you on this, from the hrm website itself: "Note that Hot Module Replacement (HMR) is still an experimental feature.", "It’s experimental and not tested thoroughly." "Expect some bugs" "Theoretically usable in production, but it maybe too early to use it for something serious" – Choking

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

Answer 4

For my projects I do next:

1) install chrome browser extension Livereload https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

2) install livereload globally (via CLI):

npm install -g livereload

or locally in your project folder (via CLI):

npm install livereload

3) put this snippet in your layout.blade.php or another template:

<script>
   document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
        ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

4) run livereload in you project folder (via CLI):

livereload

5) press livereload button in Chrome browser

That's it!

Demagoguery

Answer 5

If someone needs an alternative way to make it work, for instance if mix is not used on backend, here is how I've solved it:

edit server.php from project root directory and replace return false;:

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
    return false;
}

as follows:

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {

    // set log file for debugging purposes if needed
    #ini_set('error_log', __DIR__ . '/storage/logs/laravel.log');

    header("HTTP/1.1 301 Moved Permanently");
    header("Location: http://localhost:8080" . $uri);

    exit();
}

of course you need to start both artisan serve and npm run hot

Tranquillity