Laravel-mix: Browser sync not working - just see "It Works!"

[newtek-software-bneff]

• Laravel Mix Version: 2.1.11
• Node Version: v6.10.3
• NPM Version: v6.0.0
• OS: macOS High Sierra v10.13.4

Description:

When I run npm run watch all I see on the http://localhost:3000/ page is:

Originally I was using laravel mix outside of a laravel app setup and this issue occurred, so I tried on a fresh laravel installation and the issue is still ocurring

Everything else about laravel mix seems to work fine, the files are compliled, its just the browser sync whish is not working.

My mix config:

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .browserSync('localhost');

Steps To Reproduce:

1. Create a fresh laravel app
2. Update webpack.mix.js to the above config
3. Run npm install && npm run watch (will have to run npm run watch again once browser sync dependecies are installed)

[Celows]

same thing is happening for me. I give up for now and I'm using StudioCode Live Server extension until I figure this issue out.

[tianyong90]

Try to pass an object as the options, or just use mix.browserSync().

[horuskol]

.browserSync('localhost');

What happens if you hit http://localhost directly? The same? You're hitting the default vhost configuration in your local Apache, and that's directing you to see /var/www/index.html.

You can change your configuration to:

.browserSync('locahost:8000')

Then run php artisan serve before running npm run watch - you should see you application.

The alternative is to set up a vhost in Apache for something like app.localhost or my-awesome-app.localhost which points to your project folder (don't forget to change the proxy setting in your call to browserSync accordingly).