Laravel Valet + Laravel Mix + BrowserSync

webpack.mix.js

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

/* ... */

if (! mix.inProduction()) {
    
    let homedir = require('os').homedir();
    
    // e.g SESSION_DOMAIN = myapp.test
    let domain = process.env.SESSION_DOMAIN;

    mix.browserSync({
        
        // Watch for changes in those paths.
        files: [
            'app/**/*',
            'config/**/*',
            'public/**/*',
            'resources/views/**/*',
            'resources/lang/**/*',
            'routes/**/*',
        ],
        
        // Serve on myapp.test
        // https://browsersync.io/docs/options#option-host
        host: domain,
        
        // Serve on myapp.test:3000
        // https://browsersync.io/docs/options#option-port
        port: 3000,
        
        // Serve on https://myapp.test:3000
        // https://browsersync.io/docs/options#option-https
        https: {
            key: homedir + '/.config/valet/Certificates/' + domain + '.key',
            cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',
        },
        
        // Proxy my actual valet app
        // https://browsersync.io/docs/options#option-proxy
        proxy: {
            // Proxy https://myapp.test
            target: 'https://' + domain,
            
            // And don't touch my cookies!
            // By default, BrowserSync changes the domain in
            // every cookie generated by your app.
            // e.g "myapp.test" instead of ".myapp.test"
            // or whatever you put in SESSION_DOMAIN
            cookies: { stripDomain: false }
        },
        
        // Optional : I know how to open my browser.
        // https://browsersync.io/docs/options#option-open
        open: false,
      
        // Optional : I'm working alone.
        // https://browsersync.io/docs/options#option-online
        online: false,
      
        // Optional : Don't hide my user dropdown menu with your toast.
        // https://browsersync.io/docs/options#option-notify
        notify: {
            styles: {
                top: 'auto',
                bottom: 0,
                'border-radius': 0,
            }
        },
    });
}