Start developing Custom Applications for the Merchant Center.

# 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](https://docs.commercetools.com/merchant-center-customizations/tutorials/create-custom-application) tutorial.

Before you start development, make sure to have the following:

- A Project
- A Merchant Center account, or an [Identity account](https://docs.commercetools.com/merchant-center-customizations/docs/identity/overview)
- Basic knowledge of [React](https://react.dev), as well as some experience working with web applications
- [Node.js](https://nodejs.org/en/) installed (version `18.x`, recommended `>=20`)
- A Node.js package manager such as [`yarn`](https://yarnpkg.com/), [`pnpm`](https://pnpm.io/) or [`npm`](https://www.npmjs.com/get-npm)

[Yarn PnP](https://yarnpkg.com/features/pnp) is not supported.

# Install a starter template

The easiest way to get started is to use one of the [starter templates](https://github.com/commercetools/merchant-center-application-kit/tree/main/application-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.

```console noPromptLines="2-3"
npx @commercetools-frontend/create-mc-app@latest 
  my-new-custom-application-project 
  --template starter
```

To start with a [TypeScript](https://www.typescriptlang.org/) project, use the `--template=starter-typescript` flag. For more information about developing customizations with TypeScript, see the [Adding TypeScript](https://docs.commercetools.com/merchant-center-customizations/development/adding-typescript) page.

During the setup, you will need to provide an [`entryPointUriPath`](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-application-config#entrypointuripath) value, your Project key, and the [cloud identifier](https://docs.commercetools.com/merchant-center-customizations/merchant-center-customizations/concepts/merchant-center-api#cloud-identifiers) where your Project is located.

After the installation is complete, follow the instructions to start the development server:

```yarn
cd my-new-custom-application-project

yarn start
```

```pnpm
cd my-new-custom-application-project

pnpm start
```

```npm
cd my-new-custom-application-project

npm 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](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-application-config#entrypointuripath)):

```
/: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](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-application-config).

By default, the starter template is configured to use the [HTTP APIs in the GCP-EU Region](https://docs.commercetools.com/merchant-center-customizations/api/general-concepts#regions). 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](https://docs.commercetools.com/merchant-center-customizations/concepts/merchant-center-api#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](https://docs.commercetools.com/merchant-center-customizations/troubleshooting#granular-permissions-for-local-development).

# Related

For more information on what to do next, we recommend the following sections:

<Card title="Tooling and configuration" href="/tooling-and-configuration/cli">
  Learn about the tools and configuration options for your customization.
</Card>

<Card title="Development guidelines" href="/development">
  Learn about how to develop, test, and build your customization.
</Card>

Learn about OAuth Scopes and how you can apply user permissions in your customization.