As I noted in the now closed guide about Sage and Lando, there aren’t bugs in either Lando or Bud preventing them from working with each other. We are personally using Lando with Bud on both a Sage project and a regular Laravel project.
Feel free to ask questions amongst yourselves to try and figure this out.
If you are trying to get someone from the Roots team to solve this for you, you’re going to have to hire them for consulting.
I am sorry. I am a long time fan and user of Sage. Just not that knowledgeable, That’s why I asked where I (myself) could start digging for a solution. I don’t want to give up on Sage. Edit sorry @noahott that this thread was unlisted probably because of my comment
@ben - kindly asking if this topic could be listed again? I too am hoping for further community driven elaboration here and believe that the community can most likely benefit from this topic.
This topic isn’t locked. It will be listed once the discussion moves away from the repeated “has anyone gotten this to work?” question, which is asking for someone else to figure out the solution and deliver it to you. We frown on “free work” posts.
I have spent maybe two full weeks on trying to figure this out myself. I really am not asking for free work, just for a little bit of help. And I am willing to put more time in it if someone points me in the right direction.
I’d suggest just using Browsersync in the meantime if you’re unable to configure Lando.
yarn add browser-sync browser-sync-webpack-plugin --dev
bud.config.js:# @ bud.config.js
const bs = require('browser-sync-webpack-plugin')
...
.use(new bs({proxy: 'http://example.test'}))
const bs = require('browser-sync-webpack-plugin')
module.exports = async (app) => {
app
.entry({
app: ['@scripts/app', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
})
.assets('images')
.watch('resources/views/**/*', 'app/**/*')
.use(new bs({proxy: 'http://example.test'}))
};
@ben So far this seems to work well for me.
Should have thought of this myself I feel, but thanks for providing this workaround!
It’s even better: my lando config now also seems to work with bud 5.7.6 (without the workaround)
As @cim first noted, as of bud 5.7.6 Lando and Bud seem to be playing nicely together. My working config looks like this:
.lando.yml
name: lando-bedrock
recipe: wordpress
config:
webroot: web
proxy:
appserver:
- bedrock.lndo.site
theme:
- theme.bedrock.lndo.site:3000
services:
theme:
type: node:16
bud.config.js
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
module.exports = (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ['@scripts/app.js', '@styles/app.scss'],
editor: ['@scripts/editor.js', '@styles/editor.scss'],
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets(['images'])
/**
* These files will trigger a full page reload
* when modified.
*/
.watch([
'tailwind.config.js',
'resources/views/**/*.blade.php',
'app/View/**/*.php',
])
/**
* Development URL to be used in the browser.
*/
.serve('http://theme.bedrock.lndo.site');
}
The bud.proxy line is also not required if WP_HOME is set.
With this config, the bud dev server can be accessed from http://theme.bedrock.lndo.site.
Additionally, this config assumes you are running everything with the Lando containers, i.e. lando composer install, lando yarn, lando yarn dev…
I ran into an issue on 2 of 3 projects I had set up like this where Bud would include CSS and JS assets using an absolute URL with port 3000 that would not work outside of the containers. Interestingly enough, one site worked perfectly, including assets with relative URLs, without any apparent differences in configuration and dependency versions.
To solve this problem, the app.hooks.action code can be added below the .serve line in bud.config.js:
/**
* Development URL to be used in the browser.
*/
.serve('http://theme.bedrock.lndo.site');
/**
* Fix JS & CSS assets included with incorrect URL by updating the server config AFTER the
* dev server has been started.
*/
app.hooks.action('event.server.after', async(app) => {
Object.assign(app.server.connection, {url: new URL('http://theme.bedrock.lndo.site')})
});
Hey @ben, what to take a look at this thread again when you have a moment? I believe I have a working solution here now. Thanks!
@aksld Do you mean that literally? As in: they are not enqueued by acorn?
@noahott thanks for your work on this. two questions that could help me improve for future releases:
SEARCH_BODY_STRING and REPLACE_BODY_STRING with string or regexp values. If you use a regexp it has to end with /g (global). app.hooks.action('event.proxy.interceptor', async ({hooks}) =>
hooks.on('middleware.proxy.replacements', replacements => [
...(replacements ?? []),
[SEARCH_BODY_STRING, REPLACE_BODY_STRING],
// can add as many as needed
]),
)
I think this hook will eventually be surfaced as an config fn – proxyFindReplace() or something to that effect. Curious if you would have been able to fix this with that as a tool, had it been available.
app.hooks.action('event.server.after', async(app) => {
Object.assign(app.server.connection, {url: new URL('http://theme.bedrock.lndo.site')})
});
You can get at it with this snippet (run with --log flag and it’ll exit right after it logs the value):
app.hooks.action('event.server.after', async(app) => {
app.log(app.server.connection.url).close()
});
app.hooks.action('event.proxy.interceptor', async ({hooks}) =>
hooks.on('middleware.proxy.replacements', replacements => [
...(replacements ?? []),
['//theme.bedrock.lndo.site:3000', '//theme.bedrock.lndo.site'],
// can add as many as needed
]),
);
URL {
href: 'http://theme.bedrock.lndo.site:3000/',
origin: 'http://theme.bedrock.lndo.site:3000',
protocol: 'http:',
username: '',
password: '',
host: 'theme.bedrock.lndo.site:3000',
hostname: 'theme.bedrock.lndo.site',
port: '3000',
pathname: '/',
search: '',
searchParams: URLSearchParams {},
hash: ''
}
This is correct based on the default configuration, but causes an issue with Lando. The port used inside the docker container is 300, but should be 80 outside. When absolute URLs instead of relative, those assets don’t load.
What I can’t figure out is why one of my projects includes vendor/app.js, vendor/bud.app.editor.js, app.js, etc. with relative URLs, while other ones use absolute. If we can ensure that relative URLs are always used, then this would not be a problem.
Please let me know if there is any more info or help I can provide with this.
Got it working, thanks @noahott !
Initially I did’t realize all @Roots/... devDependencies in package.json had to be updated to 5.7.7 for the whole setup to work.
@noahott while on theme.bedrock.lndo.site don’t you have any issues logging into wp-admin (or alternatively to WooCommerce my-account)?
In my case page reloads and fails to log in, no visible errors, nothing in console nor in debug log.
Yes, this is an issue. WordPress is expecting it’s cookies to be set from the primary domain and I have not found a solution to this yet.