Dockerize Local Bedrock & Sage Development with Lando

guides
46

ABOUT USING BROWSERSYNC FOR HOT RELOADING + THE BROWSERSYNC UI:

NOTE: In my original reply, I forgot to also expose port 3001 (the default port used by Browsersync for its ‘UI’ panel). If you want hot reloading AND the Browsersync UI dashboard, use the following .lando.yml file:

name: example-name
recipe: wordpress
env_file:
  - .env
proxy:
  appserver_nginx:
    - example.local
  theme:
    - localhost:3000
    - localhost:3001
config:
  php: 7.4
  composer_version: 2-latest
  via: nginx
  webroot: web
  database: mariadb
  xdebug: true

# Add the following if you plan to use Sage as a starter theme
services:
  theme:
    type: node:14 # MUST BE >12 TO WORK WITH SAGE 10
    overrides:
      ports:
        - 3000:3000
        - 3001:3001 

# TODO Work on build steps w/ Lando and tooling here...
tooling:
  yarn:
    service: theme

excludes:
  - vendor
  - node_modules

BE SURE TO RUN lando rebuild AFTER MAKING CHANGES TO THIS FILE. THIS IS NOT OPTIONAL.

Lastly, please note that the ‘external URL’ feature of Browsersync will not work by default in Lando for security reasons. This is the feature that allows you to connect to your development site on your local LAN–such as using your cell phone to browse your dev site for testing purposes.

This is because Lando uses Docker behind the scenes; it is insecure to expose your app on your local LAN because other devices on your local network could essentially steal data from your app.

However, if you want to get Browsersync to work 100% (hot-reloading, the UI dashboard, AND the ‘external url’ feature working), you have to change the bindAddress to expose your services (a.k.a. Docker) on the LAN. THIS IS NOT ENABLED BY DEFAULT FOR SECURITY. See instructions here: https://docs.lando.dev/guides/access-by-other-devices.html#lando-share-testing-over-the-internet

Once you make these changes, you will likely have to run lando rebuild to rebuild Lando (Lando is not like docker-compose, most changes made to the .lando.yml file REQUIRE a rebuild). Also, you may have to edit the webpack.mix.js file to add more options to Browsersync to adjust the proxy URL and/or host. See the Browsersync documentation: https://browsersync.io/docs/options

4 Likes