Miss any of our Open RFC calls?Watch the recordings here! »


16.14.0 • Public • Published


Latest release (latest dist-tag) Latest release (next dist-tag) Minified + GZipped size GitHub license

This package contains utils and scripts related to the index.html for a MC application in production.


$ npm install --save @commercetools-frontend/mc-html-template


generateTemplate({ cssChunks: Array<cssPath>, scriptChunks: Array<scriptPath> }): String

This method will return the compiled HTML document with the CSS/JS scripts injected.

NOTE that the HTML document will still have the placeholders (see replaceHtmlPlaceholders)

replaceHtmlPlaceholders(html: String, env: Object): String

This method will replace the placeholders defined in the HTML document based on the values in the env.json. To load the env.json config, you can use the loadEnv method.

This method should be used as the final step to get the fully compiled index.html.

At the moment we define the following placeholders:

  • __CDN_URL__: the cdnUrl value defined in the env.json
  • __MC_API_URL__: the mcApiUrl value defined in the env.json
  • __LOADING_SCREEN_CSS__: (defined internally) the CSS for the loading animation in case the page takes longer to load
  • __LOADING_SCREEN_JS__: (defined internally) the JS for the loading animation in case the page takes longer to load
  • __APP_ENVIRONMENT__: the sanitized env.json, which will be available at the global variable window.app
  • __DATALAYER_JS__: the initial configuration for GTM, in case the trackingGtm is defined in the env.json
  • __GTM_SCRIPT__: the actual GTM script, in case the trackingGtm is defined in the env.json

loadEnv(configPath: String): Object

This method will attempt to load and parse the env.json file, performing some validation and returning the parsed JSON.

More information about required values and references can be found in the Runtime Configuration documentation of Custom Applications.

loadHeaders(env: Object, { headersPath: String, cspPath?: String }): Object

This method will return the security headers to be used on the server response, serving the index.html.

The env argument, is the parsed env.json file (see loadEnv).

Optionally, you can pass the path to a headers.json that contains custom CSP and feature directives such as:

  "csp": {
    "script-src": ["storage.googleapis.com/my-bucket-path/"]
  "featurePolicies": {
    "microphone": "none"

The cspPath has been deprecated in favour of the headerpath option. You can migrate to the new option by creating a headers.json (previously csp.json) and assigning the content of the csp.json into the csp field in the headers.json file.

The final headers object contains the following headers:

  "Strict-Transport-Security": "max-age=31536000",
  "X-XSS-Protection": "1; mode=block",
  "X-Content-Type-Options": "nosniff",
  "X-Frame-Options": "DENY",
  "Content-Security-Policy": "...",
  "Feature-Policies": "..."

Bundler entry points

The package exposes some special entry points used by specific bundlers to use the HTML template.


If you use Webpack with the HtmlWebpackPlugin, you can pass the webpack entry point that will map the Webpack template params to our generic generateTemplate method.

new HtmlWebpackPlugin({
  template: require.resolve(
  // ...


npm i @commercetools-frontend/mc-html-template

DownloadsWeekly Downloads






Unpacked Size

43.2 kB

Total Files


Last publish


  • avatar
  • avatar
  • avatar