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>