Overview
Tooling and configuration overview for Merchant Center Customizations.
To simplify building Merchant Center customizations, we offer a set of tools to streamline the development process. With most of the required configuration already in place by default, you can focus on implementing features instead of managing tooling and setup.
CLI
The CLI plays a crucial role in the development lifecycle of Merchant Center customizations, in particular by providing a development server and by building the production bundles.
Configuration files
Each customization type uses a configuration file to define the necessary settings and requirements.
- For Custom Applications, use the Custom Application Config.
- For Custom Views, use the Custom View Config.
Module bundler
The Merchant Center customization tooling uses Webpack as the main bundler for handling code transformation, loading assets, etc. For more information, see Module bundler.
Packages
The following table lists the most commonly used packages for developing Merchant Center customizations. In addition to these packages, our UI Kit library provides user interface components for use in your customizations.
| Name | Description |
|---|---|
| @commercetools-frontend/actions-global | Global Redux actions and hooks for handling user notifications. |
| @commercetools-frontend/application-shell | Set of components and utilities to serve as the customization framework. |
| @commercetools-frontend/application-shell-connectors | Complementary tools for the @commercetools-frontend/application-shell. |
| @commercetools-frontend/application-components | A collection of reusable components that can be used across different applications to maintain consistency and streamline development. |
| @commercetools-frontend/constants | A set of predefined constants used throughout customizations. |
| @commercetools-frontend/cypress | Cypress commands and utilities for customizations. |
| @commercetools-frontend/jest-preset-mc-app | Jest configuration presets specifically designed for testing customizations. |
| @commercetools-frontend/permissions | React components and hooks to declaratively handle Merchant Center user permissions. |
| @commercetools-frontend/i18n | Utilities to manage application-level messages and translations. |
| @commercetools-frontend/l10n | Utilities to load and manage localization data. |