Dockerize Local Bedrock & Sage Development with Lando

Originally published at: https://roots.io/guides/dockerize-local-bedrock-and-sage-development-with-lando/

I’ve been pretty obsessed with using Docker for local development lately. I love how fast and lightweight it is and how I can run software versions that I don’t need to have installed locally — avoiding the mess that that can make of your system. Docker is awesome, however, if you’ve ever used Docker, you…

6 Likes

Great Tutorial! …on my new laptop I’ve kept my primary user a standard (non-admin) user which had been causing a number of headaches with my local dev setup using homebrew/valet, but this was the perfect solution!

I just wanted to point out my initial issues in case anyone else were to run into them as well. I was converting a valet site to lando but kept having issues getting lando to start when the wordpress salts included in the .env file. After running lando start i would get:

ERROR: Invalid interpolation format for "environment" option in service "appserver": "8g?[N8=Q>$kxC.LtAL^v)!-#WX{O@U3seuz@;kngc4eK}:@M4MBBOPM}-)q$=!F4"

BUT once I removed the salts and kept ONLY what you had detailed in the tutorial lando started up without any issue!

Thanks!

1 Like

Thanks for pointing this out. I remember running into this issue when figuring all this out. I’ll update the tutorial to reflect this.

Thanks for this post, this setup looks pretty nice. I’m pretty new to lando and docker. Do you have any idea why running : lando composer install gives me the error Composer could not find a composer.json file in /app. I followed the steps and just created a basic bedrock + sage setup and have the default composer.json in my project root folder.

It seems like you are running lando composer install from web/app directory within Bedrock. Instead, you should run it from the root Bedrock directory since that is where the composer.json file is located.

Looks like I was doing the right thing but I forgot to do a lando rebuild. Thanks a lot for your quick answer.

1 Like

Do you have any tutorial about deploying Lando on server?

Lando isn’t actually designed to be a production/remote server solution, it’s for local development. From their docs:

It’s a free, open source, cross-platform, local development environment and DevOps tool built on Docker container technology and developed by Tandem.

I do know that there is integration with hosting providers like Pantheon, however, I do not have any experience with that.

1 Like

I see, thanks for clearing this out. I’m just new to Docker. But I’m trying to run Bedrock using Docker on server. But I don’t know what’s the best approach for it.

I don’t have any experience with Docker for PHP applications in production, but I would recommend checking out something like Laradock. Bedrock shouldn’t be too difficult to set up with it.

I have a question… I use lando for other projects and it works find… With this specific recipe I can’t let yarn work properly.

The problem is that when i run “yarn start”, it compules the first time all the assets but then it doesn’t take the changes and I have to work re-running yarn start any time. Do you have any idea of what it can be?

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

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