Custom HTML Template

When you're using JavaScript entrypoints, index.html will be generated from a HTML template file, this is the default one we use:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= html.title %></title>

  <% if (pkg.description) { %>
    <meta name="description" content="<%= pkg.description %>">
  <% } %>

</head>
<body>
  <noscript>
    We're sorry but <%= html.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.
  </noscript>
  <div id="app"></div>
</body>
</html>

Generated assets will be injected into this file. If you want to use another template file, create one at public/index.html and it will be automatically used.

If you're using HTML entrypoint, please check out HTML Entry.

Template Syntax

The template file uses lodash.template to interpolate data properties.

Template Data

html

html is basically the html option you passed here.

pkg

pkg is the data of the package.json from your project. Note that html.title defaults to pkg.name.

envs

In app code you can use process.env to access embeded Environment Variables, while in the template file you access is via the envs contant.

constants

constants is the constants option you passed here.

# Custom HTML Template

# Template Syntax

# Template Data

# html

# pkg

# envs