Skip to main content

bud.html

bud.html is used to configure your application's HTML wrapper.

Usage

bud.html can be called without passing any options.

bud.config.mjs
export default async bud => {
bud.html()
}

The default template will source a couple variables from .env; you'll want to make sure they are set.

.env
PUBLIC_APP_TITLE='My App'
PUBLIC_APP_DESCRIPTION='My App Description'

Customization

You can customize the generated HTML using an options object. It accepts everything HTMLWebpackPlugin does.

bud.config.mjs
export default async bud => {
bud.html({
title: 'My App',
meta: {
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
},
template: bud.path(`public/index.html`),
minify: false,
inject: false,
})
}

Using a custom template

The path to this file will be resolved relative to the project root:

bud.config.mjs
export default async bud => {
bud.html({
template: 'index.html',
})
}

Define your template as an absolute path if this doesn't work for you:

bud.config.mjs
export default async bud => {
bud.html({
template: bud.path(`public/index.html`),
})
}

Defining template variables

Add template variables using replace.

bud.config.js
export default async bud => {
bud.html({
template: bud.path(`public/index.html`),
replace: {VARIABLE: `value`},
})
}

You may use any of these variables in the template by surrounding the variable name with % characters.

public/index.html
<html>
<title>%VARIABLE%</title>
</html>