Start developing Custom Applications for the Merchant Center.
Copy for LLM
View as Markdown
Getting started
The information on this page provides basic instructions for developing a Custom Application. If you would prefer to follow a step-by-step guide, see our Create and install a Custom Application tutorial.
Before you start development, make sure to have the following:
-
A Project
-
A Merchant Center account, or an Identity accountYou can only use an Identity account if the region your Project is hosted on has switched to Identity authentication. For more information, see the Merchant Center rollout schedule.
-
Basic knowledge of React, as well as some experience working with web applications
Yarn PnP is not supported.
Install a starter template
The easiest way to get started is to use one of the starter templates.
We recommend that you create a new Custom Application using the
create-mc-app package, which automatically sets up one of the starter templates for you.npx @commercetools-frontend/create-mc-app@latest \
my-new-custom-application-project \
--template starter
To start with a TypeScript project, use the
--template=starter-typescript flag. For more information about developing customizations with TypeScript, see the Adding TypeScript page.During the setup, you will need to provide an
entryPointUriPath value, the project key of your Composable Commerce Project, and the cloud identifier where your project is located.After the installation is complete, follow the instructions to start the development server:
cd my-new-custom-application-project
yarn start
The browser opens a new tab pointing to
http://localhost:3001. You are redirected to a login page to authenticate.Once you're authenticated, you are redirected to the local development server and have access to the Project.
If you look at the URL structure of the Merchant Center, you will notice that the URI path starts with the
projectKey (the identifier of your commercetools Project) and the entryPointUriPath (the identifier of the Custom Application):/:projectKey/:entryPointUriPath
Configure the Custom Application
One of the important parts of a Custom Application is the configuration file:
custom-application-config.json.
We recommend making yourself familiar the Custom Application Config.By default, the starter template is configured to use the HTTP APIs in the GCP-EU Region. If you plan to run your Custom Application in another environment, you will need to update the
cloudIdentifier accordingly. For more information, see our list of cloud identifiers.User access for local development
To start developing your Custom Application locally, choose a Project belonging to an Organization in which you are a member of the
Administrators Team.As of version
22.5.0, you have the option of assigning granular permissions to teams to enable local development. For more information, see Granular permissions for local development.