Learn how to deploy your customization to Connect.

# Prerequisites

Before you get started, you need to have:

- A Project ([get started](https://docs.commercetools.com/merchant-center-customizations/api/getting-started/initial-setup)) and one of the following:
  - A Custom Application [configured in the Merchant Center](https://docs.commercetools.com/merchant-center-customizations/merchant-center/managing-custom-applications). When configuring your Custom Application, enter a dummy URL value for Application URL as you will update it after the Custom Application is deployed.
  - A Custom View [configured in the Merchant Center](https://docs.commercetools.com/merchant-center-customizations/merchant-center/managing-custom-views). When configuring your Custom View, enter a dummy URL value for Application URL as you will update it after the Custom View is deployed.

# Create your Application

## Custom Application

1. Install a Connect [starter template](https://docs.commercetools.com/merchant-center-customizations/connect/development#use-a-template).

2. Open the `merchant-center-custom-application` folder in the Connect starter template and [install the Custom Applications starter template](https://docs.commercetools.com/merchant-center-customizations/custom-applications#install-a-starter-template) inside this folder.

3. Add your environment variables to `custom-application-config.mjs`.

   ```js title="custom-application-config.mjs" highlightLines="3-13"
   const config = {
     name: 'Example Custom Application',
     entryPointUriPath: '${env:ENTRY_POINT_URI_PATH}',
     cloudIdentifier: '${env:CLOUD_IDENTIFIER}',
     env: {
       development: {
         initialProjectKey: 'my-project-key',
       },
       production: {
         applicationId: '${env:CUSTOM_APPLICATION_ID}',
         url: '${env:APPLICATION_URL}',
       },
     },
     oAuthScopes: {
       view: ['view_products'],
       manage: ['manage_products'],
     },
     icon: '${path:@commercetools-frontend/assets/application-icons/rocket.svg}',
     mainMenuLink: {
       defaultLabel: 'Template starter',
       labelAllLocales: [],
       permissions: [PERMISSIONS.View],
     },
     submenuLinks: [
       {
         uriPath: 'channels',
         defaultLabel: 'Channels',
         labelAllLocales: [],
         permissions: [PERMISSIONS.View],
       },
     ],
   };

   export default config;
   ```

4. Update the value of `entryPointUriPath` in `constants.ts`/`constants.js`.

   ```js title="constant.js"
   export const entryPointUriPath =
     typeof window === 'undefined'
       ? process.env.ENTRY_POINT_URI_PATH
       : window.app.entryPointUriPath;
   ```

5. Open `connect.yaml` in the root of the Connect starter template and replace it with the following:

   1. Enter a `name` for the application.
   2. Define the environment variables you included in `custom-application-config.mjs`.

   ```yml title="connect.yaml"
   deployAs:
     - name: name-of-custom-application
       applicationType: merchant-center-custom-application
       configuration:
         standardConfiguration:
           - key: CUSTOM_APPLICATION_ID
             description: the Custom Application ID
             required: true
           - key: CLOUD_IDENTIFIER
             description: The cloud identifier
             default: 'gcp-eu'
           - key: ENTRY_POINT_URI_PATH
             description: The Application entry point URI path
             required: true
   ```

   `APPLICATION_URL` is automatically provided by Connect and you do not need to define it in `connect.yaml`.

   `CUSTOM_APPLICATION_ID` and `ENTRY_POINT_URI_PATH` must only be used for the Custom Application’s `Application ID` and `Application entry point URI path` respectively.

6. Push your code to a GitHub repository and make a new release. Your release must have a Git tag.

   If you create a Connector in the [Merchant Center](https://docs.commercetools.com/merchant-center-customizations/merchant-center/connect#create-an-organization-connector), you'll be asked to specify the GitHub repository containing your Connect applications.

   You can specify the GitHub repository by linking your GitHub account, or by providing the SSH URL or HTTPS URL of the repository. The HTTPS URL will work only if the repository is public. If the repository is private, you must use the SSH URL and grant read access to the [connect-mu](https://github.com/connect-mu) [machine user](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/managing-deploy-keys#machine-users).

## Custom View

1. Install a Connect [starter template](https://docs.commercetools.com/merchant-center-customizations/connect/development#use-a-template).

2. Open the `merchant-center-custom-view` folder in the Connect starter template and [install the Custom View starter template](https://docs.commercetools.com/merchant-center-customizations/custom-views#install-a-starter-template) inside this folder.

3. Add your environment variables to `custom-view-config.mjs`.

   ```js title="custom-view-config.mjs" highlightLines="3-13"
   const config = {
     name: 'Example Custom View',
     cloudIdentifier: '${env:CLOUD_IDENTIFIER}',
     env: {
       development: {
         initialProjectKey: 'my-project-key',
       },
       production: {
         customViewId: '${env:CUSTOM_VIEW_ID}',
         url: '${env:APPLICATION_URL}',
       },
     },
     oAuthScopes: {
       view: ['view_products'],
       manage: ['manage_products'],
     },
   };

   export default config;
   ```

4. Open `connect.yaml` in the root of the Connect starter template and replace it with the following.

   1. Enter a `name` for the application.
   2. Define the environment variables you included in `custom-view-config.mjs`.

   ```yml title="connect.yaml"
   deployAs:
     - name: name-of-custom-view
       applicationType: merchant-center-custom-view
       configuration:
         standardConfiguration:
           - key: CUSTOM_VIEW_ID
             description: the Custom View ID
             required: true
           - key: CLOUD_IDENTIFIER
             description: The cloud identifier
             default: 'gcp-eu'
   ```

   `APPLICATION_URL` is automatically provided by Connect and you do not need to define it in `connect.yaml`.

   `CUSTOM_VIEW_ID` must be used only for the Custom View’s `View ID`.

5. Push your code to a GitHub repository and make a new release. Your release must have a Git tag.

   Your GitHub repository can be public or private. If you are using a private repository, you must provide access to the GitHub machine user [connect-mu](https://github.com/connect-mu).

# Publish and deploy your application

You can publish and deploy your application using either the [Connect API](https://docs.commercetools.com/merchant-center-customizations/deployment/commercetools-connect#use-the-connect-api) or the [Merchant Center](https://docs.commercetools.com/merchant-center-customizations/deployment/commercetools-connect#use-the-merchant-center). You will require the `Application ID` and `Application entry point URI path` of your [configured Custom Application](https://docs.commercetools.com/merchant-center-customizations/merchant-center/managing-custom-applications) or [configured Custom View](https://docs.commercetools.com/merchant-center-customizations/merchant-center/managing-custom-views).

## Use the Connect API

1. [Create a Connector](https://docs.commercetools.com/merchant-center-customizations/connect/getting-started#create-a-connector) which references the GitHub repository and release tag of your application.
2. Publish your Connector using the [preview](https://docs.commercetools.com/merchant-center-customizations/connect/getting-started#request-previewable-status-for-connectorstaged) or [publish](https://docs.commercetools.com/merchant-center-customizations/connect/getting-started#publish-for-private-use) flow.
3. [Deploy the Connector](https://docs.commercetools.com/merchant-center-customizations/connect/getting-started#deploy-a-connector) with the correct configuration values:
   - For Custom Applications, the `CUSTOM_APPLICATION_ID` must be the `Application ID` and `ENTRY_POINT_URI_PATH` must be the `Application entry point URI path` of your configured Custom Application.
   - For Custom Views, the `CUSTOM_VIEW_ID` must be the `View ID` of your configured Custom View.
4. Once your Connector is deployed, [get the Deployment](https://docs.commercetools.com/merchant-center-customizations/connect/deployments#get-deployment) and copy the value of `applications[*].url`. This is the URL where your Custom Application or Custom View is deployed.
5. In the Merchant Center, update the Application URL of your Custom Application or Custom View with the URL where it is deployed.

## Use the Merchant Center

1. [Create an Organization Connector](https://docs.commercetools.com/merchant-center-customizations/merchant-center/connect#create-an-organization-connector) which references the GitHub repository and release tag of your application.
2. Publish your Connector using Request Preview or Publish for private use.
3. [Install the Organization Connector](https://docs.commercetools.com/merchant-center-customizations/merchant-center/connect#install-an-organization-connector) with the correct configuration values:
   - For Custom Applications, the `CUSTOM_APPLICATION_ID` must be the `Application ID` and `ENTRY_POINT_URI_PATH` must be the `Application entry point URI path` of your configured Custom Application.
   - For Custom Views, the `CUSTOM_VIEW_ID` must be the `View ID` of your configured Custom View.
4. Open Manage connectors and click Installations. When the Status of the Connector is `Installed`, click the Connector and select your application from the list. Copy the value of the `URL` field. This is the URL where your Custom Application or Custom View is deployed.
5. Update the Application URL of your Custom Application or Custom View with the URL where your Custom Application or Custom View is deployed.

# Test your deployment

[Install the Custom Application](https://docs.commercetools.com/merchant-center-customizations/merchant-center/managing-custom-applications#install-a-custom-application) in the Merchant Center and access it in your Projects.
[Install the Custom View](https://docs.commercetools.com/merchant-center-customizations/merchant-center/managing-custom-views#install-a-custom-view) in the Merchant Center and access it in your Projects.