Lando + Bedrock + Bud/Sage Configuration

I have a partially working configuration of Lando with Bedrock and Sage 10 using Bud 5.7.3. Changes in Bud 5.4.0 have made the configuration older guides in Roots Discourse and elsewhere no longer function. I’m posting this hear to share and to request assistance in getting the bud/Lando configuration fully functional.

.lando.yml (within a sage10 theme and bedrock)

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 (the default Sage config + .serve())

/**
 * @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',
    ])

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://bedrock.lndo.site')

    .serve('http://0.0.0.0:3000');  # 0.0.0.0 instructs node server to bind to all addresses

With this configuration, the Bud dev server is accessible from http://theme.bedrock.lndo.site on both ports 80 and 3000. The only issue now is that bud does not properly intercept URLs, so clicking any link takes me back to the site I’m proxying, instead of the dev url. I’m assuming this is because Bud doesn’t know the proper URL since I’m not passing it in to bud.serve and only defining it for Lando.

Passing in ‘http://theme.bedrock.lndo.site:3000’ to bud.serve results in the error Error: listen EADDRNOTAVAIL: address not available 172.19.0.5:3000 and then Bud chooses a different random port.

I thing needed for a full working configuration is a way for Bud to bind to all ports while also specifying a desired dev url so the rewriting will work properly. In the Bud release notes, Kelly mentions it is now possible to pass in additional options to .serve : Release: 5.7.0 | bud.js
I think these are the options he refers to: HTTP | Node.js v16.14.2 Documentation
I’ve tried to find a way to pass bud.server the desired dev address while overriding the addresses to bind on, but have not yet been successful with that. I’m not sure if this is possible or if we need some additional options in Bud.

I welcome anyone’s thoughts or insights on these issues.

2 Likes

With the update to Bud 5.7.4, this no longer works. When I try to access the theme.bedrock.lndo.site URL bud crashes with the error

❯  firing action event.proxy.interceptor 1/1

   ┏ TypeError ━━━━┓
   ┃                  ┃
   ┃                  ┃
   ┃   Invalid URL    ┃
   ┃                  ┃
   ┃                  ┃
   ┗━━━━━━━━━━┛

I don’t really know anything about lando but I think you want something like this:

 app.serve('http://example.lndo.site');
 app.hooks.action('event.server.before', async (app) =>
   Object.assign(app.server.connection, {
     url: new URL('http://0.0.0.0:3000'),
   }),
 );

That said, this request feels weird. There must be a way for lando to map the public URL within the container to the URL outside the container. Or, one could run dev outside of the container. But, like I said, I don’t use lando.

Actually, I am running yarn dev or yarn build outside the container.

I have tried every configuration and suggestion in this and the previous thread, but no luck.

It was mentioned a few times that it is probably server configuration problem and am glad to accept that.

But hot reloading worked with my Lando configuration (similar to the one from OP) and Sage 10-beta3 (Bud 5.3.2) and not with the later versions of Sage. So something must have changed in bud > 5.4 (or its dependencies) that isn’t playing well with Lando. I tried to compare Bud version 5.3.2 with later versions, but I am afraid I am not knowledgeable enough to make enough sense of it. @kellymears maybe you could give me an indication of where I should start digging

I moved to Trellis for now, but that is just not the best option for my use case.

:x:

This isn’t a Bud issue. Please don’t ask the maintainer of Bud to fix your Lando config.

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.

1 Like

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.

  1. install browsersync: yarn add browser-sync browser-sync-webpack-plugin --dev
  2. modify bud.config.js:
# @ bud.config.js
const bs = require('browser-sync-webpack-plugin')

...
    .use(new bs({proxy: 'http://example.test'}))
full config example
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)

2 Likes

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.

5 Likes

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')})
    });
5 Likes

Last solution from @noahott works.

Without hooks, CSS and JS are not enqueued.

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!

1 Like