Documentation

This is the legacy documentation of Project-level Custom Applications, which is in maintenance mode. Visit the new documentation for Org-level Custom Applications.

BETA

Available Scripts

To develop Merchant Center Custom Applications we recommend using the @commercetools-frontend/mc-scripts package. It's a command-line interface, inspired by react-scripts to develop and build a React application.

mc-scripts start

This command starts the application in development mode. The page will reload if you edit source files.

mc-scripts build

This command bundles the application in production mode to the dist/assets folder. It also creates an index.html.template file, which contains references to the generated bundle entry points. This file needs to be compiled to index.html, based on runtime values. See Production build for more information.

mc-scripts compile-html

This command compiles the index.html.template file into an index.html file, based on the application config. Additionally, it also generates Content Security Policy headers, including SHA hashes based on the runtime configuration. See the Compiling a Custom Application section for more information.

This script requires mc-scripts build to be executed first.

mc-scripts serve

This command starts a HTTP server to serve the previously built and compiled Custom Application from the public folder.

Using dotenv files (.env)

This feature is available from version >= 20.1.0.

The mc-scripts CLI has the dotenv features built-in.

By default, the following dotenv files are loaded according to the current environment values specified on each command: process.MC_APP_ENV or process.NODE_ENV. The priority of how the files are merged and overwritten goes from top to bottom (highest defined variable overrides lower).

  • .env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.
  • .env.development, .env.test, .env.production: Environment-specific settings.
  • .env.local: Local overrides. This file is loaded for all environments except test.
  • .env

Please refer to the dotenv documentation for more details.

Furthermore, you can pass additional dotenv files by using the following option:

  • --env <path>: Parses the file path as a dotenv file and adds the variables to the environment. Multiple flags are allowed.

These files will take higher priority over the standard environment dotenv files.