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 
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"
]
}
it seems to work but I don’t fully understand what I’m doing here! 
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