Browsersync Lando

lando.yml

proxy:
  mannequin:
    - appname-styleguide.lndo.site
  node:
    - appname-bs.lndo.site:3000
services:
  mannequin:
    type: compose
    services:
      image: php:7.3
      command: docker-php-entrypoint /app/vendor/bin/mannequin start -c /app/.mannequin.php 0.0.0.0:80
  node:
    type: node
    build:
      - "cd /app/web/themes/custom/foo_theme && yarn install"
      - "cd /app/web/themes/custom/foo_theme && yarn dev"
    command: cd /app/web/themes/custom/foo_theme && yarn watch
    port: 3000

webpack.mix.js

let mix = require('laravel-mix');
// This is the domain of your node container through your proxy
const domain =
  process.env.BS_DOMAIN ||
  'appname-bs.lndo.site';
// this is the port your proxy url will serve BS for
const port =
  process.env.BS_PORT ||
  80;
// this is domain of your appserver
const proxyDomain =
  process.env.BS_PROXY_DOMAIN ||
  'appserver_nginx.appname.internal';
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

 mix
  .js('src/js/app.js', 'dist/')
  .sass('src/scss/app.scss', 'dist/')
  .browserSync({
    proxy: proxyDomain,
    socket: {
      domain: domain,
      port: port
    },
    open: false
  });

For those willing to run NPM from the host machine for the sole purpose of hot reloading, it seems like you can now get by with simply:

mix.browserSync({
        proxy: 'laravel.lndo.site',
        open: false
    });