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?