Laravel-Mix + BrowserSync Not Loading at localhost:3000

Question

I'm trying to set up BrowserSync to work with my Laravel project. However, when I run npm run watch, localhost:3000 doesn't load. I'm not getting any compilation errors in the terminal. Interestingly enough, the UI dashboard on localhost:3001 works perfectly fine.

If I run php artisan serve, localhost:8000 loads up fine, but of course, it's not connected with BrowserSync.

My webpack.mix.js file looks like this:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.browserSync({proxy:'localhost:3000'});

I'm using the following versions:

Laravel-Mix: 4.0.7

browser-sync: 2.26.7

webpack-dev-server: 3.8.0

browser-sync-webpack-plugin: 2.0.1

Any thoughts?

Solution 1

Install these two plugins:

1. "browser-sync": "^2.26.5"
2. "browser-sync-webpack-plugin": "^2.0.1",

mix.browserSync('http://localhost:8000/');

Solution 2

I was able to reload via brosersync adding injectChanges: false to my browsersync line.

Solution 3

you must do it like so:

mix.browserSync({
    proxy: "http://localhost:8000"
});