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?

Schroth

Answer 1

Install these two plugins:

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

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

Billen

Thanks for your help. I tried this modification and it still didn't work. When I run npm run dev, it still can't find localhost:3000 or localhost:8000. If I run php artisan serve, it will show localhost:8000, but it is not synced with browser-sync, so it doesn't automatically refresh. – Schroth

you have to run both commend together. first run (php artisan serve) it will open a server with port 8000 then run (npm run watch) – Billen

I'll try that now. Will the browser refresh in localhost:8000? – Schroth

you saved my life @jualahmed!! spent two hours looking for a solution and this worked!!! dont know why but it worked! haha – Carine

Thank you so much for this! Saved me so much time. – Breban

Oh my god for me, the key was in the last forward slash. proxy: 'https://mydomain.loc' didn't work. proxy: 'https://mydomain.loc/' did work! – Niigata

Answer 2

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

Ivelisseivens

Answer 3

you must do it like so:

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

Broiler

Answer 4

When you start the Laravel server via php artisan serve, this will be printed in the terminal:

Starting Laravel development server: http://127.0.0.1:8000

After starting the Laravel server, I changed the code in the webpack.mix.js file from this:

mix.browserSync();

To that:

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

Antirrhinum

Answer 5

The BrowserSync docs states that you can set ui: false

This way you can then set the port: 8080 or whatever value you want that's not being used. Here's how implement it.

if (!mix.inProduction()) return mix.browserSync({
  hot: true,
  ui: false,
  open: true,
  watch: true,
  https: false,
  files: [
    './app/*',
    './routes/*',
    './public/*',
    './storage/*',
    './stories/*',
    './resources/*'
  ],
  port: 8080,
  host: '0.0.0.0',
  proxy: {
    target: "http://yourlocal.dev",
    ws: true
  }
});

Cirro

Answer 6

In your webpack.mix.js, add the following:

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

After that, run the following commands

**npm uninstall browser-sync-webpack-plugin**
**npm install browser-sync-webpack-plugin**

The above will automatically open **http://localhost:3000/** on your browser

Courtmartial

Answer 7

Add this script before Tag:

document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.27.7'><\/script>".replace("HOST", location.hostname));

If not work change your webpack.mix.js like this and the the above script before </ body> Tag:

const mix = require("laravel-mix");

//Compiling scss to css
mix.sass("public/assets/css/style.scss", "public/assets/css/style.css");

mix.browserSync({
    proxy: "http://localhost/myapp/", //Your host
    files: [ //Files for watching
        "./app/**/*",
        "./routes/**/*",
        "./public/assets/css/*.css",
        "./public/js/*.js",
        "./resources/views/**/*.blade.php",
        "./resources/lang/**/*",
    ],
});

Then run: npm run watch

Ama