# @commercetools-frontend/mc-html-template > Everything related to render the index.html for a MC application Latest version **27.17.0** (published 2026-11-03) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-frontend/mc-html-template pnpm add @commercetools-frontend/mc-html-template yarn add @commercetools-frontend/mc-html-template bun add @commercetools-frontend/mc-html-template ``` ## Health **Score 65/100 (B)** — status: active. Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 27.17.0 | | Published | 2026-11-03 | | First published | 2018-08-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | ^22.23.4 \|\| ^24.22.1 \|\| >=26.12.1 | | Dependencies | 7 | | Unpacked size | 128.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 79 | | Maintainers | tdeekens, emmenko, commercetools-admin | | Keywords | javascript, frontend, react, toolkit | ## Links - npm: https://www.npmjs.com/package/@commercetools-frontend/mc-html-template - Repository: https://github.com/commercetools/merchant-center-application-kit - Homepage: https://docs.commercetools.com/merchant-center-customizations - Issues: https://github.com/commercetools/merchant-center-application-kit/issues - npm.io page: https://npm.io/package/@commercetools-frontend/mc-html-template ## Dependencies (7) - [uglify-js](https://npm.io/package/uglify-js.md) 3.19.3 - [uglifycss](https://npm.io/package/uglifycss.md) 0.0.29 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.22.15 - [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^7.1.3 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.22.15 - [@commercetools-frontend/constants](https://npm.io/package/@commercetools-frontend/constants.md) ^27.17.0 - [@commercetools-frontend/application-config](https://npm.io/package/@commercetools-frontend/application-config.md) ^27.17.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 27.17.0 (latest) — 2026-11-03 - 0.0.0-changesets-ghcommit-temp-changeset-release-main-20261103220908 (changesets-ghcommit-temp-changeset-release-main) — 2026-11-03 - 0.0.0-canary-20261103220809 (canary) — 2026-11-03 - 0.0.0-fec-1395-sentry-graphql-spans-20261103191331 (fec-1395-sentry-graphql-spans) — 2026-11-03 - 0.0.0-FEC-1433-content-skeleton-early-shell-20261016130021 (FEC-1433-content-skeleton-early-shell) — 2026-10-16 - 0.0.0-fix-preview-publish-on-push-20261006164301 (fix-preview-publish-on-push) — 2026-10-06 - 0.0.0-save-toolbar-cqw-v2-20260908184114 (save-toolbar-cqw-v2) — 2026-09-08 - 0.0.0-FEC-1297-part-1-bundle-json-output-mode-20260904143500 (FEC-1297-part-1-bundle-json-output-mode) — 2026-09-04 - 0.0.0-fix-nimbus-optional-build-4030-20260708142501 (fix-nimbus-optional-build-4030) — 2026-07-08 - 0.0.0-FEC-1017-shell-splitter-region-20260618140924 (FEC-1017-shell-splitter-region) — 2026-06-18 - 0.0.0-fix-serialize-javascript-20260428090559 (fix-serialize-javascript) — 2026-04-28 - 0.0.0-CRAFT-2074-eslint9-migration-core-20260227150731 (CRAFT-2074-eslint9-migration-core) — 2026-02-27 - 0.0.0-CRAFT-2080-app-kit-i-18-n-date-format-incorrect-for-regional-english-locales-en-be-en-ie-etc-20260202153139 (CRAFT-2080-app-kit-i-18-n-date-format-incorrect-for-regional-english-locales-en-be-en-ie-etc) — 2026-02-02 - 0.0.0-CRAFT-2074-eslint-v9-migration-new-pkg-20260130195951 (CRAFT-2074-eslint-v9-migration-new-pkg) — 2026-01-30 - 0.0.0-CRAFT-1995-upgrade-sentry-react-20251211194319 (CRAFT-1995-upgrade-sentry-react) — 2025-12-11 - … 1718 more at https://npm.io/package/@commercetools-frontend/mc-html-template/versions ## README # @commercetools-frontend/mc-html-template

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 Merchant Center customization. ## Install ```bash $ npm install --save @commercetools-frontend/mc-html-template ``` ## API ### `generateTemplate` This method will return the template HTML document with the provided CSS/JS scripts injected. > NOTE that the HTML document will still have the **placeholders** (see `replaceHtmlPlaceholders`) ```ts type TGenerateTemplateOptions = { cssImports?: string[]; scriptImports?: string[]; }; function generateTemplate({ cssImports = [], scriptImports = [], }: TGenerateTemplateOptions); ``` ### `replaceHtmlPlaceholders` This method will replace the **placeholders** defined in the HTML document based on the application config. 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 application config - `__MC_API_URL__`: the `mcApiUrl` value defined in the application config - `__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 application config environment, which will be available at the global variable `window.app` - `__CSP__`: the generated `Content-Security-Policy` directives, defined as an HTML meta tag ```ts type TReplaceHtmlPlaceholdersOptions = { env: ApplicationRuntimeConfig['env']; headers: Record; }; function replaceHtmlPlaceholders( indexHtmlContent: string, options: TReplaceHtmlPlaceholdersOptions ): string; ``` ### `compileHtml` This method will compile the template HTML document. ```ts type TCompileHtmlResult = { env: ApplicationRuntimeConfig['env']; headers: Record; indexHtmlContent: string; }; async function compileHtml( indexHtmlTemplatePath: string ): Promise; ``` ### `processHeaders` This method will return the security headers to be used on the server response, serving the `index.html`. The `applicationConfig.env` is the processed application environment that would be injected as the `window.app`. The `applicationConfig.headers` is the processed application headers provided by the user. The return value of the `processHeaders` function contains the following ready-to-use HTTP headers: ```json { "Strict-Transport-Security": "max-age=31536000", "X-XSS-Protection": "1; mode=block", "X-Content-Type-Options": "nosniff", "X-Frame-Options": "SAMEORIGIN", "Content-Security-Policy": "...", "Feature-Policies": "..." } ``` ```ts function processHeaders( applicationConfig: ApplicationRuntimeConfig ): Record; ``` ## Bundler entry points The package exposes some special entry points used by specific bundlers to use the HTML template. #### Webpack 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. ```js new HtmlWebpackPlugin({ template: require.resolve( '@commercetools-frontend/mc-html-template/webpack' ), // ... }), ``` --- _Source: https://npm.io/package/@commercetools-frontend/mc-html-template · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._