Entrypoints

bud.js uses the concept of "entrypoints" to group application scripts and styles. Entrypoints are defined using bud.entry.

You can think of an entrypoint as a "page" in your application. Each entrypoint will have its own output file.

info

If your application's entrypoint is located at @src/index.js then you don't need to do anything. bud.js will automatically detect this and create an entrypoint for you.

If you only have a single entrypoint then it is enough to just pass the filename:

TS
JS
YML
JSON

bud.config.ts
import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.entry('app') // src/app.js
}

bud.config.js
/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.entry('app') // src/app.js
}

bud.config.yml
entry: app # src/app.js

bud.config.json
{
  "entry": "app" // src/app.js
}

If you have more than one file to include in the bundle, you can use an array:

TS
JS
YML
JSON

bud.config.ts
import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.entry(['app.js', 'global.css'])
}

bud.config.js
/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.entry(['app.js', 'global.css'])
}

bud.config.yml
entry:
  - ['app.js', 'global.css']

bud.config.json
{
  "entry": [["app.js", "global.css"]]
}

If you have additional entrypoints you may call bud.entry multiple times.

But, it might be preferable to use an object:

TS
JS
YML
JSON

bud.config.ts
import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.entry({
    app: ['app.js', 'global.css'],
    landing: ['landing.js', 'landing.css'],
  })
}

bud.config.js
/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.entry({
    app: ['app.js', 'global.css'],
    landing: ['landing.js', 'landing.css'],
  })
}

bud.config.yml
entry:
  app: ['app.js', 'global.css']
  landing: ['landing.js', 'landing.css']

bud.config.json
{
  "entry": {
    "app": ["app.js", "global.css"],
    "landing": ["landing.js", "landing.css"]
  }
}

There is still more that this function can do, but for our overview this is more than enough. You can learn more about this and other details in the bud.entry documentation.

Entrypoints manifest

When you build your application, bud.js will generate a manifest file that contains a list of all the entrypoints and their corresponding output files. This file is located at @dist/entrypoints.json.

{
  "app": {
    "js": ["app.js"],
    "css": ["app.css"]
  },
  "landing": {
    "js": ["landing.js"],
    "css": ["landing.css"]
  }
}

You can use this file to load your application scripts and styles using server-side languages like PHP or Ruby.

Entrypoints manifest​

Entrypoints manifest