Skip to main content

bud.html

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

Usage

bud.html can be called to generate an HTML skeleton for your web application.

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.

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.

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

You can use a custom HTML template by passing the path to bud.html. If the given path is relative it will be resolved against the project base directory.

export default async bud => {
bud.html(`index.html`)
}

Alternatively, you can use the template option as part of an options object:

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

Define your template as an absolute path if it exists outside the project:

export default async bud => {
bud.html({
template: `/code/shared/template.html`,
})
}

Defining template variables

Add template variables using replace.

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.

<html>
<title>%VARIABLE%</title>
</html>