Create and install a Custom View

Set configuration values

Next, you will be asked to provide basic information about your Custom View 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 the initial project key for local development, enter your unique commercetools Project key, then press Enter.
2. 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 View will be configured with the values you provided. You may also notice that the package downloads the required dependencies. This can take a few minutes.

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

Start the local development server

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

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

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

   yarn start
   

Here's what the local preview looks like:

Permissions

Locators

Size

Initial configuration

First, set the initial configuration:

1. Open the Merchant Center and log in using your credentials.
2. Click the profile icon and select Manage organizations & teams.
3. Select the Organization for which you wish to configure a Custom View.
4. Click the Custom Views tab.
5. Click Configure Custom Views.
6. Add a contact email address for the developer or maintainer of the Custom View.

Add the Custom View

Next, add the Custom View:

1. Click Add a Custom View.
2. Enter the following details:
   • Custom View name: My Channels View
   • Custom View URL: enter a placeholder value like https://test.com. We'll update this later after we deploy the Custom View.

Set permissions and menu options

Now, let's add these 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 Custom View Menu section, enter or select the following values:
   • Link label: enter View Channels.
   • Entry points: select Product general page.
   • Custom Panel type, select Extended Custom Panel.
3. Click Register Custom View.

Configure and deploy using Vercel

To deploy to Vercel, do the following:

1. Create a Git repository and add the files from the my-new-custom-view-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 View and where it is hosted.

1. Add the Custom View ID (that you received after adding the Custom View to the Merchant Center) to the env.production.customViewId 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.
   Examplejson

   {
     "env": {
       "production": {
         "customViewId": "hxkhrl1i312sys6rjh1e6n3",
         "url": "https://<project>.vercel.app"
       }
     }
   }
   
   The preceding code snippet shows example values. You will need to provide your own values for customViewId and url.

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