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)