Create and install a Custom Application

Set configuration values

Next, you will be asked to provide basic information about your Custom Application and commercetools Project. Be sure to take note of the values that you provide as you will need them later in the tutorial.

1. For entryPointUriPath, choose a unique identifier for your Custom Application, then press Enter.
   The entryPointUriPath is unique across a Composable Commerce Region. To learn more about this identifier, including formatting restrictions and other considerations, see the Custom Application Configuration documentation.
2. For the initial project key for local development, enter your unique commercetools Project key, then press Enter.
3. For cloudIdentifier, type the cloud identifier for the region where your commercetools Project is located, then press Enter.
   By default, the starter template is configured to use the Composable Commerce Project hosted in the Europe (Google Cloud, Belgium) region. If your Project is hosted in another region, you will need to set the cloudIdentifier according to the list of supported cloud identifiers.

At this point, the starter template will be downloaded and the Custom Application will be configured with the values you provided. You may also notice that the package downloads the required dependencies. This might take a minute.

After everything is installed and configured, you will see a message in your terminal letting you know that the Custom Application has been created.

Start the local development server

Now, let's start the local development server which lets you test your Custom Application locally without needing to deploy it:

1. Navigate to the folder that contains your Custom Application project:

   cd my-new-custom-application-project
   
2. Start the server by issuing the start command:
   yarnpnpmnpm

   yarn start
   

Here's what the local preview looks like:

Entry Point URI Path

/:projectKey/:entryPointUriPath

Permissions

Initial configuration

First, set the initial configuration:

1. Open the Merchant Center (not through the localhost tab) and log in using your Merchant Center credentials.

2. Click the profile icon and select Manage organizations & teams.

3. Select the Organization for which you wish to configure a Custom Application.

4. Click the Custom Applications tab.
5. Click Configure Custom Applications.

6. Add a contact email address for the developer or maintainer of the Custom Application.

   To proceed to the next step, you must first verify your email address. You only have to do this once.

Add the Custom Application

Next, add the Custom Application:

1. Click Add a Custom Application.

2. Enter the following details:

   • Application name: My Channels App
   • Application URL: enter a placeholder value like https://test.com. We'll update this later after we deploy the Custom Application.
   • Application entry point URI path: Enter the unique identifier that you previously set for the entryPointUriPath.

Set permissions and menu options

Now, let's add these same two scopes to the Merchant Center, then configure some additional settings:

1. In the Permissions > Default group section, add the scopes to the following fields:
   • OAuth Scopes for View: add the view_products scope.
   • OAuth Scopes for Manage: add the manage_products scope.
2. In the Main menu section, enter or toggle the following values:
   • Default link label: enter Channels.
   • Link permissions > Default group: toggle on both the View and Manage permissions.
3. Click Register Custom Application.

Configure and deploy to Vercel

To deploy to Vercel, do the following:

1. Create a Git repository and add the files from the my-new-custom-application-project folder to the root directory.
   If you created a local repository, you need to push those changes to the remote repository before proceeding to the next step.

2. Visit your Vercel dashboard and click Add New..., then select Project.

3. Import your Git repository into Vercel and proceed to configure the project settings.

4. In the Build & Output Settings section, make the following changes:
   • Framework Preset: Create React App
   • Build Command: yarn build
   • Output Directory: public
   
5. Click Deploy.

Update the configuration

Next, we need to update the configuration file with information about the Custom Application and where it is hosted.

1. Add the Custom Application ID (that you received after adding the application to the Merchant Center) to the env.production.applicationId field.
2. Add the Vercel production URL of your deployed project to the env.production.url field. Be sure to include https:// before your URL.
   Don't use the Deployment URL from the Vercel dashboard since this value changes each time your project builds. Instead, use one of the URLs listed under Domains.

{
  "env": {
    "production": {
      "applicationId": "hxkhrl1i312sys6rjh1e6n3",
      "url": "https://<project>.vercel.app"
    }
  }
}

1. Save the file and then push the changes to your remote repository.