How do I configure bud properly?

bud
1

I’m trying to figure out how to configure bud properly without Sage.

Paths

How do the below paths get resolved?

      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],

I know a webpack.config.js is being generated, but where can I configure the aliases in the bud config?

For now I set the paths relative to the file and bud now picks them up.

Aliases

Edit: Just found this, but setting an alias doesn’t change much, builds are still in ‘src’ and ‘dist’…

Edit2: Also found this, but the example also uses the default paths.

And another thing, I’ve added @roots/bud-preset-wordpress and @roots/bud-sass, yet I still get the following error, am I missing a setting? This only happens when I divert from the default src folder.

ERROR  ./assets/styles/app.scss

Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Watching

Also, my files aren’t being watched… I have a folder with twig templates (theme_folder/views), but when I edit these, the build process is not getting triggered. My bud.config.mjs settings are:

bud.config.mjs

// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/getting-started/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["./assets/scripts/app.js", "./assets/styles/app.scss"],
      editor: ["./assets/scripts/editor.js", "./assets/styles/editor.scss"],
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["views/**/*", "*.php"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("https://sitename.com")

    /**
     * Development origin, don't forget to add '127.0.0.1 bud' to your hosts
     */
    .serve("http://bud:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/sitename/assets/");
};

package.json

{
  "devDependencies": {
    "@roots/bud": "^6.3.5",
    "@roots/bud-preset-wordpress": "^6.3.5",
    "@roots/bud-sass": "^6.3.5"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build"
  }
}

Thanks! :zap:

2

Does anyone have a clue? I really want to use bud in the new theme set-up for my team because of it’s speed, but can’t because of this issue.

3

I’m still looking for an answer. Is there anyone here who has set up bud successfully for a custom theme other than Sage?

Thanks. :slightly_smiling_face:

4

Howdy! Bud’s Sage extension handles a good bit of functionality. You might want to take a look into the source/docs of that extension to see what you might need to use.

If you need some further assistance, providing a git repo for someone to be able to pull down and reproduce would be a good start!

It’s also possible to book a call with Kelly (via GitHub Sponsors) if you really need to get unblocked quicker

5

Thanks for the reply, Ben.

My biggest issue is that the documentation seems to be incomplete. But maybe I’m just overlooking things or expected to know more than I do.

I’ve stripped my repository to the bare minimum so everyone can reproduce my issues.

My issues:

  • Assets are not built in the correct folders
  • Webpack is asking for appropriate loaders

Expected outcome:

  • Built assets in public folder
  • No errors when building from a scss file

Current outcome:

  • Built assets in dist folder
  • You may need an appropriate loader to handle this file type error when building

Thanks!

6

What is missing from the docs? FWIW, L9-11 and L15-18 of your Bud config do not look correct for what you’re trying to accomplish

Ref: bud.setPath | bud.js
Ref: bud.entry | bud.js

Untested, but try something like:

...

    .setPath({
      "@src": "assets",
      "@dist": "public",
    })

    .entry({
      app: ["scripts/app", "styles/app"],
      editor: ["scripts/editor", "styles/editor"],
    })

...
7

That’s it. I definitely overlooked it. Thanks for looking.

1 Like
8

Hey @ben,

I’m facing one more issue: my selected files are not being watched.

I want twig files in views and php files in includes to be watched. I’ve added this to my configuration:

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["views/**/*", "includes/**/*"])

Used Sage as an example. Bud is not being triggered upon save in these directories.