Deploying to commercetools Connect

Prerequisites

Before you get started, you need to have:

• A commercetools Composable Commerce Project (get started).
• A Custom Application configured in the Merchant Center.

Create your application

1. Install a Connect starter template.

2. Open the merchant-center-custom-application folder in the Connect starter template and install the Custom Applications starter template inside this folder.

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

   custom-application-config.mjsJavaScript

   const config = {
     name: 'Example Custom Application',
     entryPointUriPath,
     cloudIdentifier: '${env:CLOUD_IDENTIFIER}',
     env: {
       development: {
         initialProjectKey: '${env:CTP_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. Open connect.yaml in the root of the Connect starter template and replace it with the following. Enter a name for the application, and define the environment variables you included in custom-application-config.mjs.

   connect.yamlyml

   deployAs:
     - name: name-of-custom-application
       applicationType: merchant-center-custom-application
       endpoint: /
       configuration:
         standardConfiguration:
           - key: CTP_PROJECT_KEY
             description: project key from the Composable Commerce Project
             default: 'your-project-key'
           - key: CUSTOM_APPLICATION_ID
             description: the Custom Application ID
             required: true
           - key: CLOUD_IDENTIFIER
             description: the cloud identifier
             default: 'gcp-eu'

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

Publish and deploy your application

You can publish and deploy your application using either the Connect API or the Merchant Center.

Using the Connect API

1. Create a Connector which references the GitHub repository and release tag of your application.
2. Publish your Connector using the preview or publish flow.
3. Deploy the Connector with the correct configuration values. CUSTOM_APPLICATION_ID should be the applicationId of your configured Custom Application.
4. Once your Connector is deployed, get the Deployment and copy the value of applications[*].url. This is the URL where your Custom Application is deployed.
5. In the Merchant Center, update the Application URL of your Custom Application with the URL where your Custom Application is deployed.

Using the Merchant Center

1. 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 with the correct configuration values. CUSTOM_APPLICATION_ID should be the applicationId of your configured Custom Application.
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 is deployed.
5. Update the Application URL of your Custom Application with the URL where your Custom Application is deployed.

Test your deployment

Install the Custom Application in the Merchant Center and access it in your Projects.