laravelwebpackwebpack-dev-serverbrowser-synclaravel-mix

Laravel-Mix + BrowserSync Not Loading at localhost:3000

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

  • Install these two plugins:

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

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