Laravel Elixir BrowserSync Proxy not Working

Question

I've just installed Laravel 5.3, it's a completely fresh install and after looking through the Docs i've set up my Gulpfile as follows:

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js')
       .version(['css/app.css', 'js/app.js'])
       .browserSync({
         proxy: 'subdomain.mydomain.dev'
       });
});

For some reason every single time i run gulp watch it launches the browser towards localhost:3000

What am i doing wrong? Isn't this supposed to direct the BrowserSync to my Mamp Vhost if i set the address exactly the same?

Answer 1

First, change your .dev domain to something different from a globally registered TLD, because lately .dev TLD is owned by google and it's requiring a SSL connection etc..

More details here: https://medium.engineering/use-a-dev-domain-not-anymore-95219778e6fd

You can initialize your browserSync module with some extra parameters like this:

.browserSync({
    proxy: 'subdomain.mydomain.tld',
    host: 'subdomain.mydomain.tld',
    open: 'external'
});

host: Override host detection if you know the correct IP to use

open: Decide which URL to open automatically when Browsersync starts. Defaults to "local" if none set.

If you can see your defined host in browsersync cli initialization message as external host, it should work.