Can't get browsersync to work (with Lando?)

Created on 1 September 2024, 7 months ago

Problem/Motivation

BrowserSync sounds awesome, and I've never gotten it to work.

I'm using Lando to build sites on my local, and have node running in its own isolated docker container to keep it cleanly segregated from my local development environment (which doesn't even have php, drush, or composer, for that matter - all of that lives in docker containers).

Steps to reproduce

Site install is via lando. Lando spins up a copy of node in its own container.

(Edited .lando.yml down for clarity)

name: mysite
recipe: drupal10
config:
  webroot: web
services:
  appserver: 
    ...
  database: 
    ...
  node:
    type: node
    build:
      - cd /app/web/themes/custom/mysite_bootstrap_sass && npm install
    globals:
      gulp-cli: latest
tooling:
  npm:
    service: node
    dir: /app/web/themes/custom/mysite_bootstrap_sass
  node:
    service: node
    dir: /app/web/themes/custom/mysite_bootstrap_sass
  gulp:
    service: node
    dir: /app/web/themes/custom/mysite_bootstrap_sass

Follow installation instructions on https://www.drupal.org/project/bootstrap_sass , using npm lando install where required.

Set up bootstrap_sass subtheme using bash scripts/create_subtheme.sh

Modify guplfile.js to point to my site:

// Static Server + watching scss/html files
function serve () {
  browserSync.init({
    proxy: 'https://mysite.lndo.site',
  })

  gulp.watch([paths.scss.watch, paths.scss.bootstrap], styles).on('change', browserSync.reload)
}

if I run "lando gulp", scss compiles, and node is convinced that Browsersync is working just great:

[Browsersync] 2 files changed (bootstrap.min.css, style.min.css)
[19:06:52] Finished 'styles' after 6.87 s
[19:10:02] Starting 'styles'...
[Browsersync] Reloading Browsers...
[Browsersync] 2 files changed (bootstrap.min.css, style.min.css)
[19:10:09] Finished 'styles' after 6.73 s

But absolutely nothing happens on my browser. I can refresh the browser and see my changes.

As best I can tell, I should be expecting an async attribute in the body tag on my page, that's not rendered at all:

<body class="layout-no-sidebars page-node-1 user-logged-in path-frontpage node--type-layout-builder-page toolbar-horizontal toolbar-fixed toolbar-tray-open" data-once="contextualToolbar-init" style="padding-top: 79px;">

I'm guessing this has something to do with node living in an isolated container, away from the web server. If so, I'll live with hit and hit F5 a lot. Can anyone verify this? Or is there something else I should try?

💬 Support request
Status

Active

Version

5.0

Component

Code

Created by

🇨🇦Canada TrevorBradley

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024