CODEWITHSUNDEEP
laravellaravel-mixlaravel-elixir
toothful
toothful

Reputation: 892

Laravel 5.4 - Mix - How to run browser live reload

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?

Upvotes: 21

Views: 28563

Answers (5)

Viktor Matushevskyi
Viktor Matushevskyi

Reputation: 744

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 livereload button

That's it!

Upvotes: 6

CodeXP
CodeXP

Reputation: 162

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

Upvotes: 2

Edu Ruiz
Edu Ruiz

Reputation: 1877

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!

Upvotes: 24

zhekaus
zhekaus

Reputation: 3194

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/**/*'
           ]
       })
   ]
});

  1. 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

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

    php artisan serve & npm run watch

Upvotes: 14

Jayswager
Jayswager

Reputation: 211

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.

Upvotes: 6

Related Questions