Roots Discourse

Dockerize Local Bedrock & Sage Development with Lando

Thank for the fantastic tutorial. I got all working in a few minutes but for some reason the Browsersync times out for me.

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/sage",
  "devUrl": "https://appserver_nginx.sovereign.internal",
  "proxyUrl": "https://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

Any idea where I am going wrong?

I found a solution, instead of running the Browsersync from the container, just run it local. Not a great solution, preferred way would be to run inside it.

For anyone using Capistrano for deploy, I managed to get it working with those small additions to the lando.yml

name: sovereign
recipe: wordpress
proxy:
theme:

  • localhost:3000
    config:
    php: ‘7.2’
    via: nginx
    webroot: web
    database: mariadb
    xdebug: true

services:
theme:
type: node
overrides:
ports:
- 3000:3000
ruby:
type: ruby:2.4
install_dependencies_as_me:

  • gem install capistrano
  • gem install capistrano-composer
  • gem install capistrano-wpcli
  • gem install bedrock-capistrano-uploads
  • gem install capistrano-file-permissions
    tooling:
    yarn:
    service: theme
    gem:
    service: ruby
    ruby:
    service: ruby
    cap:
    service: ruby
    database:
    portforward: 3306

I’ve followed these instructions to a T but I’m unable to get browsersync to work at all. My .lando.yml:

name: zing-it
recipe: wordpress
proxy:
  theme:              # Optional: add this if you include the Sage specific config down below
    - localhost:3000
config:
  php: '7.2'
  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
    services:
      ports:
        - 3000:3000
tooling:
  yarn:
    service: theme

yarn startseems to work correctly:

[BS] [HTML Injector] Running...
[Browsersync] Proxying: http://appserver_nginx.zing-it.internal
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://172.21.0.3:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://172.21.0.3:3001
 -----------------------------------
[Browsersync] Watching files...
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

but then going to localhost:3000 doesn’t work - can’t establish a connection to the server at localhost:3000.

Am I doing something wrong here?

Hi there,

Thanks @knowler for the great tutorial. It looks like a nice way to develop Sage themes, I’m really motivated to make it work completely!

When running :
lando yarn start
…I experience the same issue as @wbiggs: http://localhost:3000 isn’t working (connection refused).
Note: it’s the same for http://localhost:3001.

Thanks to @Olaf_Siebert’s comment, I’ve managed to make it work locally (running yarn start instead of lando yarn start). But it seems that this is not the right approach. Could you please tell me why? I probably don’t grasp the big picture of containers with WordPress theme development.

Finally, I think I miss some debug skills with containers. Why aren’t ports 3000 and 3001 correctly forwarded?


Here are the files I use and the outputs:

.lando.yml :

name: my-app
recipe: wordpress
proxy:
  theme:
    - localhost:3000
  config:
    php: '7.3'
    via: nginx
    webroot: web
    database: mariadb:10.3
    xdebug: true

# Add the following if you plan to use Sage as a starter theme
services:
  theme:
    type: node
    overrides:
      ports:
        - 3000:3000
        - 3000:3001
tooling:
  yarn:
    service: theme

Then when running lando start, everything looks fine:

$ lando start
Let's get this party started! Starting app..
landoproxyhyperion5000gandalfedition_proxy_1 is up-to-date
Starting my-app_theme_1 ... done
Starting my-app_appserver_1 ... done
Starting my-app_database_1  ... done
Starting my-app_appserver_nginx_1 ... done
Waiting until appserver_nginx service is ready...
Waiting until database service is ready...
Waiting until theme service is ready...
Waiting until appserver service is ready...

BOOMSHAKALAKA!!!

Your app has started up correctly.
Here are some vitals:

NAME                  my-app
LOCATION              /Users/yaaax/workspace/my-app
SERVICES              appserver_nginx, appserver, database, theme
APPSERVER_NGINX URLS  https://localhost:32901
                      http://localhost:32902
                      http://my-app.lndo.site
                      https://my-app.lndo.site
THEME URLS            http://localhost
                      https://localhost

–> http://my-app.lndo.site displays the website :ok_hand:


web/app/themes/my-theme/resources/assets/config.json :

{
  "open": false,
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/my-theme",
  "devUrl": "http://appserver_nginx.my-app.internal",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

And when I run lando yarn start (from web/app/themes/my-theme/), again it looks fine:

$ lando yarn start
yarn run v1.16.0
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

Webpack is watching the files…

DONE  Compiled successfully in 12189ms                                                                                                                    3:36:44 PM

[BS] [HTML Injector] Running...
[Browsersync] Proxying: http://appserver_nginx.my-app.internal
[Browsersync] Access URLs:
-----------------------------------
      Local: http://localhost:3000
    External: http://172.20.0.3:3000
-----------------------------------
          UI: http://localhost:3001
UI External: http://172.20.0.3:3001
-----------------------------------
[Browsersync] Watching files...


DONE  Compiled successfully in 4690ms

But…

  • going to localhost:3000 ==> ERR_CONNECTION_REFUSED
  • going to localhost:3001 ==> ERR_CONNECTION_REFUSED

Modifying a scss actually file triggers :

WAIT  Compiling...

DONE  Compiled successfully in 3317ms

But not change when refreshing my page on my browser (http://my-app.lndo.site), even after a refresh (and disabling cache)

FYI, my working “local config” :
config.json:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/my-theme",
  "devUrl": "http://my-app.lndo.site",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

:warning: it seems to work but I don’t fully understand what I’m doing here! :sweat_smile:

Note : I haven’t modified the .lando.yml file

Love your tutorial and the idea but when I access "https://bedrock.lndo.site’’ I get “404 page not found”. I’m doing something wrong but not sure what.

Thanks in advance

1 Like

Hey everyone we’re not going to provide support for this guide until Lando 3.0 officially drops so we can work with a stable API. The guide has written for an release candidate — which in retrospect was a bad idea, but a good proof of concept — so the API hasn’t exactly been stable. Gonna lock the thread until the 3.0 release.

4 Likes

Now that a stable version of Lando 3.x has been released, I have reopened this topic.

1 Like

To others following along with this tutorial in 2020 (thank you Roots!), if you are getting the error:

“Proxying to an unknown service”

This relates to a change moving to 3.0.0-rc.2+. See: https://docs.lando.dev/guides/updating-to-rc2.html#new-images . Lando has been updated heavily since this tutorial was written…

Or more specifically, see:


Long story short, under the ‘proxy:’ settings in the .lando.yml, it should be changed from:

proxy:
    nginx:
       - bedrock.test

to:

proxy:
    appserver_nginx:
       - bedrock.test

(That is, if you are still following this tutorial. Your specific configuration may differ.)

@coltoneakins have you been able to get the browersync server working for you? Using the Landofile from the tutorial and a bunch of different attempts of my own from reading the Lando docs I haven’t been able to get it to work. There’s always some variation of This site can't be reached at localhost:3000.

@max_tyrrell
Last night, I did not get to fully setting up the local dev enviroment w/ Lando yet (was working on other stuff). But, I have pretty heavy experience with Node.js and Docker Compose so I am sure I will figure it out. I plan to sit down with this more in the coming days.

I will make an extensive post of what I did (if I find out), and I will be sure to update this thread here too.

1 Like

Awesome! That’d be amazing! :slight_smile:

This is what I’m using for webpack-dev-server and a non-standard Sage setup. It can probably be adopted to work with BrowserSync if someone wants to give it a shot. In short, replace 8080 with 3000 and then make sure browser-sync binds to 0.0.0.0 instead of default localhost. Also, this means that browser-sync (or dev-server, for me) will always be running. I’m fine with this, but others might prefer to have more control over when it starts and stops.

name: my-roots-site
recipe: wordpress
config:
  cache: redis
  webroot: web
  via: nginx
  database: mariadb
  xdebug: true
  config:
    # vhosts: ../lando/default.conf
    # php: ../lando/php.ini
proxy:
  theme:
    - dev-server.lndo.site:8080
services:
  appserver:
    build:
      - composer global require hirak/prestissimo
      - composer install --no-interaction --no-progress --no-scripts
      - wp package install aaemnnosttv/wp-cli-login-command
      - composer install --working-dir=/app/web/app/themes/my-roots-site --no-interaction --no-progress --no-scripts
    run:
      - wp core is-installed || wp @production db export - | wp db import -
      - >-
        wp plugin is-installed --skip-packages --skip-plugins --skip-themes wp-cli-login-server ||
        wp login install --activate --yes --skip-plugins --skip-themes
      - wp acorn optimize:clear
  cache:
    type: redis
  theme:
    type: node:12
    port: 8080
    ssl: true
    build:
      - yarn --cwd /app/web/app/themes/my-roots-site install --non-interactive --silent --frozen-lockfile
    command: yarn --cwd /app/web/app/themes/my-roots-site start --public https://dev-server.lndo.site --key /lando/certs/lndo.site.key --cert /lando/certs/lndo.site.crt --cacert /lando/certs/lndo.site.pem --non-interactive
    overrides:
      environment:
        DEV_SERVER_HOST: '0.0.0.0'
        DEV_SERVER_PORT: 8080
tooling:
  redis-cli:
    service: cache
  yarn:
    service: theme
    cmd: timeout --preserve-status -k 360 300 /usr/local/bin/yarn --cwd /app/web/app/themes/my-roots-site
  nuke:
    service: appserver
    cmd:
      - rm -rf /app/vendor
      - rm -rf /app/web/wp
      - rm -rf /app/web/app/themes/my-roots-site/node_modules
      - rm -rf /app/web/app/themes/my-roots-site/vendor
      - rm -rf /app/web/app/themes/my-roots-site/dist
events:
  pre-stop:
    - >-
      test -d /app/web/wp &&
      test -d /app/vendor &&
      wp core is-installed --skip-packages --skip-plugins --skip-themes &&
      wp db export
  post-start:
    - appserver: which php && php --version
    - appserver: which wp && wp cli version
    - appserver: which composer && composer --version
    - theme: which node && node --version
    - theme: which npm && npm --version
    - theme: which yarn && yarn --version
5 Likes

Wow absolute life safer. I ran into this just now!

1 Like

My config return only Bad Gateway, I can’t get work with bedrock :confused:

name: name
recipe: wordpress
proxy:
  theme:
    - localhost:3000
config:
  php: '7.2'
  via: nginx
  webroot: web
  database: mariadb
  xdebug: true
services:
  pma:
    type: phpmyadmin
    hosts:
      - database
  theme:
    type: node:10
    services:
      ports:
        - 3000:3000
tooling:
  yarn:
    service: theme

my config return bad gateway when run yarn start from container ;(

I am found a solution!

replace

services:
      ports:
        - 3000:3000

to

overrides:
      ports:
        - 3000:3000

Hey Max, I did sit down with this more. However, for what it is worth Browsersync practically worked outside of the box for me–my configuration differs only a little from the tutorial. For this reason, I think you might be running into an issue with your configuration–not like a problem with Lando or Bedrock/Sage.

Could you create maybe a minimal repository on GitHub of your project and post it here? I would be happy to troubleshoot with you.