Tooling
commercetools strives to provide the best developer experience for building Custom Applications, allowing you to focus on building features and business logic instead of focusing on tooling. commercetools open source packages can be grouped into two parts: development tools and application libraries.
Development tools
The packages in this group are used for things around development like starting a dev server, providing Babel/Jest/ESLint presets, etc.
@commercetools-frontend/babel-preset-mc-appThis package provides an advanced Babel configuration that includes plugins for basic features as well as optional features. Check out the package main module to see the exact list.
@commercetools-frontend/create-mc-appThis package is used to bootstrap and install one of the application starter templates.
@commercetools-frontend/eslint-config-mc-appThis package provides an ESLint configuration for linting, optimized for Merchant Center applications.
@commercetools-frontend/jest-preset-mc-appThis package provides a configuration for running Jest tests, optimized for Merchant Center applications.
@commercetools-frontend/mc-http-serverThis package provides a NodeJS HTTP server that you can use to serve your Merchant Center application in production.
@commercetools-frontend/mc-scriptsThis package provides a command-line tool including several development commands. See available scripts for more information.
Application libraries
The packages in this group are used for developing the React application. They are bundled with Rollup for both CommonJS 1 and ES Modules 2 targets. Some of those packages should not need to be used directly, others are necessary to build an application.
@commercetools-frontend/actions-globalThis package exposes redux actions that can be used to report errors, show notifications, etc.
@commercetools-frontend/application-componentsThis package exposes UI components that can be used to build specific parts of the application's UI. The components follow the same principles of the UIKit components, but are more specific to Merchant Center applications.
@commercetools-frontend/application-shellThis package is the main library used to run a Merchant Center application. See Application Shell for more information.
@commercetools-frontend/application-shell-connectorsThis package exposes components that use React Context and therefore can be used to retrieve data from any part of the application.
@commercetools-frontend/assetsThis package provides static assets such as images, etc. that can be used throughout the Merchant Center application.
@commercetools-frontend/browser-historyThis package exposes an enhanced version of the browser history, used by the React Router.
@commercetools-frontend/constantsThis package exposes useful constant variables such as HTTP targets, etc.
This package provides translations for the other application kit packages. It also exposes some shared
react-intlmessages, for example for button labels.This package provides localized data for countries, currencies, languages, etc.
@commercetools-frontend/notificationsThis package exposes a notification system built on top of Redux and is bundled within the
application-shell. To use notifications, please refer to the@commercetools-frontend/actions-globaland@commercetools-frontend/react-notificationspackages.@commercetools-frontend/permissionsThis package exposes components to handle permissions, used to restrict access to certain parts of the application.
@commercetools-frontend/react-notificationsThis package exposes components as React bindings for the notifications package.
This package exposes components and Redux actions for declarative data fetching, built on top of the JS SDK. This package should be used for connecting to REST APIs, as for GraphQL we use React Apollo.
@commercetools-frontend/sentryThis package exposes functions to report errors to Sentry.
@commercetools-frontend/url-utilsThis package exposes functions to help working with URLs.