Development server

Setting the dev URL

Use bud.setUrl to set the development server URL.

TS

bud.config.ts

import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.setUrl(3030) // Deltron zero hero not no small feat
}

JS

bud.config.js

/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.setUrl(3030) // Deltron zero hero not no small feat
}

YML

bud.config.yml

setUrl: 3030 # Deltron zero hero not no small feat

JSON

bud.config.json

{
  "setUrl": 3030
}

Setting the proxy URL

Use bud.setProxyUrl to set the development server proxy URL.

TS

bud.config.ts

import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.setProxyUrl(`http://example.test`)
}

JS

bud.config.js

/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.setProxyUrl(`http://example.test`)
}

YML

bud.config.yml

setProxyUrl: http://example.test

JSON

bud.config.json

{
  "setProxyUrl": "http://example.test"
}

Setting public URLs

You can use bud.setPublicUrl and bud.setPublicProxyUrl to set the public URL of the development server.

This is useful in containerized development environments like Docker where the internal URL is different from the external URL.

Here is an example of what this might look like, but it is going to depend heavily on your setup:

TS

bud.config.ts

import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud
    .setUrl(3000)
    .setPublicUrl(`http://example.test:3000`)
    .setProxyUrl(8080)
    .setPublicProxyUrl(`http://example.test`)
}

JS

bud.config.js

/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud
    .setUrl(3000)
    .setPublicUrl(`http://example.test:3000`)
    .setProxyUrl(8080)
    .setPublicProxyUrl(`http://example.test`)
}

YML

bud.config.yml

setUrl: 3000
setPublicUrl: http://example.test:3000
setProxyUrl: 8080
setPublicProxyUrl: http://example.test

JSON

bud.config.json

{
  "setUrl": 3000,
  "setPublicUrl": "http://example.test:3000",
  "setProxyUrl": 8080,
  "setPublicProxyUrl": "http://example.test"
}

Advanced configuration

The development server can be further configured with bud.serve. This is primarily used to handle configuring bud.js to use an SSL certificate.

TS

bud.config.ts

import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.serve({
    url: new URL(`https://example.test`),
    cert: `/path/to/example.test.crt`,
    key: `/path/to/example.test.key`,
  })
}

JS

bud.config.js

/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.serve({
    url: new URL(`https://example.test`),
    cert: `/path/to/example.test.crt`,
    key: `/path/to/example.test.key`,
  })
}

YML

bud.config.yml

serve:
  url: https://example.test
  cert: /path/to/example.test.crt
  key: /path/to/example.test.key

JSON

bud.config.json

{
  "serve": {
    "url": "https://example.test",
    "cert": "/path/to/example.test.crt",
    "key": "/path/to/example.test.key"
  }
}

Consider a separate config

Consider better organizing your configuration by using a separate config file for development.

Just add .development to your bud.config.* file name to scope it to development only.

Or, load a separate file entirely using bud.addConfig.

TS

bud.config.development.ts

import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.setUrl(3030)
}

JS

bud.config.development.js

/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.setUrl(3030)
}

YML

bud.config.development.yml

setUrl: 3030

JSON

bud.config.development.json

{
  "setUrl": 3030
}