Start developing Custom Views for the Merchant Center.

# Getting started

The information on this page provides basic instructions for developing a Custom View. If you would prefer to follow a step-by-step guide, see our [Create and install a Custom View](https://docs.commercetools.com/merchant-center-customizations/tutorials/create-custom-view) 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) and 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/custom-views-templates). To create a new Custom View from a starter template using the `create-mc-app` package, run the following command:

```console noPromptLines="2-4" title="Create new Custom View from the starter template"
npx @commercetools-frontend/create-mc-app@latest 
  my-new-custom-view-project 
  --application-type custom-view 
  --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 the project key of your Project 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, issue the following command to start the development server:

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

yarn start
```

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

pnpm start
```

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

npm start 
```

This command opens a new browser tab pointing to `http://localhost:3001`. You'll be redirected to a login page, where you need to authenticate.

After authentication, you'll be redirected to the local development server and have access to the Project.

In contrast to Custom Applications, Custom Views are implemented inside the built-in applications of the Merchant Center. To help with development, the local server will first render a dummy application. You can use this dummy application to access your Custom View, just like you would in the Merchant Center.

The following image shows the local development landing page for the `starter` template:

Image url: https://docs.commercetools.com/merchant-center-customizations/images/local-custom-view-landing-view\.png Alt text: Local development landing page for the starter template

And here is an example with the Custom View opened:

Image url: https://docs.commercetools.com/merchant-center-customizations/images/local-custom-view-opened.png Alt text: Local development with the Custom View opened

## Configure the Custom View

Before you start developing your Custom View, you should familiarize yourself with the [design guidelines](https://docs.commercetools.com/merchant-center-customizations/concepts/design-guidelines/custom-views) to understand the best practices for panel sizes, content layout types, and general component usage.

You'll also want to familiarize yourself with the [Custom View Config](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-view-config) (`custom-view-config.mjs`) which lets you configure various Custom View properties, including the panel size.

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 View 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 View locally, choose a Project belonging to an Organization in which you are a member of the `Administrators` Team.

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-1).

# 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.