Laravel-mix: Can we Have BrowserSync added?

[nerissaolaes]

Right Now , if we Run npm run hmr , and we change anything in our vue files its being hot reloaded....
But what if we change something in our blade files?

I hope we Can Use Again Browsersync like in laravel elixir,
lets say we will proxy it on localhost:3000
and still we have it also hot reloaded... at localhost:8080 via npm run hmr...
hope we can add some alias like npm run browsersync...
which behind the scene will check any changes in our blade template...

[QWp6t]

for what it's worth, i'll be making sure that my browsersync plugin works with laravel-mix

https://github.com/QWp6t/browsersync-webpack-plugin

(i think there would be issues right now because i'm pretty sure webpack-dev-middleware would conflict with webpack-dev-server)

[nerissaolaes]

would be waiting for the update, thanks

[Bram-Zijp]

The browser-sync-webpack-plugin coops nicely with the Webpack Dev Server. Check out the repository in which I composed a working example for an Homestead Environment.

[tormjens]

For the time being you can also run BrowserSync from the command line.

I use this:

browser-sync start --proxy example.dev --files="dist/**/*.css,dist/**/*.js,templates/**/*.blade.php"

[rogierborst]

@tormjens For some reason your solution works great for js and css files, but my blade templates don't seem to trigger a refresh. Any idea why that would be? Even **/*.php won't do the job...

[Bram-Zijp]

@rogierborst After some time of playing around with BrowserSync paired with HMR and the dev server, I recommend installing BrowserSync and use it like so:

Note: the usePolling/poll claims to have a performance impact but in my Windows environment it is required to record file changes in the Homestead VirtualBox. The thing that makes it all work are the proxies which is where issues might arise when configured improperly.

Install BrowserSync and add other dependencies when required. Add start script to start firing things up with 'npm start' from the terminal

"scripts": {
  "start": "cross-env NODE_ENV=development webpack-dev-server",
  "dist": "cross-env NODE_ENV=production webpack --progress --colors"
},
"devDependencies": {
  "browser-sync": "^2.6.0",
  "webpack-dev-middleware": "^1.9.0",
  "webpack-dev-server": "^2.2.0-rc.0",
  "webpack-hot-middleware": "^2.15.0"
}

BrowserSync powers available like so (should be definable in both laravel.mix.js and webpack.config.js)

var BrowserSync = require('browser-sync')

BrowserSync({
    host: projectx.dev,
    port: 3000,
    proxy: `http://projectx.dev:8080`,
    ui: false,
    open: false,
})

BrowserSync.watch(
    'resources/views/**/*.{php,html}',
    {usePolling: true},
    BrowserSync.reload,
)

Some devServer settings I use (in laravel mix these are defined in webpack.config.js as per my knowledge)

module.exports {
    devServer: {
        inline: true,
        hot: true,
        contentBase: '/',
        proxy: { '*': `http://projectx.dev` },
        host: projectx.dev,
        port: 8080,
        stats: { colors: true },
        watchOptions: { poll: 1000 },
    },
}

Then just start the webpack dev server with 'npm start' from the terminal and browse to http://projectx.dev:3000

[rogierborst]

I'm not sure what file you do this in. scripts and devDependencies is in package.json, I assume. But where do you put the other config lines?

edit:
Wait, I understand. In my case, those lines go into webpack.mix.js. It seems to recognize changes in my blade files (I see my console updates). Browser doesn't refresh, but I guess that's just a matter of fiddling with some settings. Thanks!

[Bram-Zijp]

@rogierborst I updated to comment to be more explanatory

[rogierborst]

Thanks, I have it working now! Can't get hrm to work, but that has never worked for me anyways. Something to do with me running on a windows machine I believe. I think there's a pr out there that tries to solve it.

[Bram-Zijp]

@rogierborst HMR should be working. Try adding this if(module.hot) module.hot.accept() at the bottom of your script. Everything above this line (imports and the code in the file itself) should trigger Hot Reloads.

[rogierborst]

@Bram-Zijp It's the Mix() php helper function that doesn't find the newly processed js file. So it's not node related. I can go to localhost:8080/public/js/app.js and see the file is updated (so yes, hrm works on that end), but my view throws an Unable to locate Mix file exception.

[ashokgelal]

If anyone is interested, I got it working without much fuss. I wrote a little blog post on how to setup Browsersync with Laravel Mix: https://ashokgelal.com/2017/01/29/laravel-mix-browsersync/

I'm on OSX BTW. So, I don't know if this works for Windows users. If any Windows user could verify this solution, that'd be great!

[ghost]

@ashokgelal I have used it form windows, it works!! Thanks, you save my life!!

[loginov-rocks]

@ashokgelal works on Windows, thank you!

I have projects using names like appname.localhost:8056 and no one solutions works with this, BrowserSync haven't loaded _http://localhost:3000_ until I've added appname.localhost to the hosts file. So, turned out it just can't resolve address. BTW, documented mix.browserSync('appname.localhost:8056'); works too.

[corysimmons]

Laravel 5.4

1. $ yarn add -D browser-sync
2. Add this proxy snippet to webpack.mix.js:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .browserSync({
       proxy: 'blog.dev'
   });

1. yarn run watch

Bit more seamless

• Disable those Injected app.css messages: https://browsersync.io/docs/options#option-notify
• Disable auto opening (so you don't end up with a bunch of the same tabs): https://browsersync.io/docs/options#option-open

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .browserSync({
       proxy: 'blog.dev',
       notify: false,
       open: false
   });

By default, it seems like Laravel Mix watches public/{*,**/*} (all compiled assets) and Blade files, but it doesn't seem to other php files. You can change that with the files BrowserSync property.

// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .browserSync({
       proxy: 'blog.dev',
       notify: false,
       open: false,
       files: [
'!node_modules', '!vendor', 'public/{*,**/*}', '{*,**/*}.php']
   });

This will watch everything in public and all your .php files (which is pretty nice).

Hope this helps.

[nok]

Thanks @corysimmons!

[corysimmons]

np. I'm sure there's a better way to do it via overriding the webpackConfig object but I'm too lazy to figure it out.

@JeffreyWay If possible, it'd be nice if we could get Webpack to watch styles and all php (sans vendor) by default. If you'd be interested in that I can figure out the Webpack way to do it and possibly submit a PR.