As MACH architecture is gaining its popularity, solutions we are building tends to integrate on a frontend layer. This integration pattern unlocks omnichannel capabilities for your projects as you are not locked into just generating HTML for Web, but can power mobile apps, in-store devices, and even experiences in cars multimedia systems. That said, there is a problem that the operations team can face working with various components of the headless architecture. Those components might no know anything about each other šŸ™‚. While they can be usually connected via some sort of SSO, that will allow users to seamlessly login into each interface. Those interfaces look differently and not talking to each other out-of-the-box.

Fortunately, vendors usually provide some options to build integrations between SaaS platforms. Below I’ll give can show you how this can be done.

Overview

For this integration, I would assume that we need to configure some content for let’s say a mobile app, and within CMS we need to select a product or a category to configure some UI element. The most straight forward way to integrate the two would be actually to copy-paste ID from commerce platforms into CMS text fields. However, this is for sure not user-friendly.

To make the integration better we would need to create some custom fields in CMS and populate data from the commerce platform.

I’ve selected two platforms for this integration:

How the Integration Works?

Custom Fields Integration for CT and CS

  1. CMS UI loads an entity that has configured a custom field. The custom fields load micro-ui via predefined URL and passes configurations.
  2. Micro-ui processes configuration and connects to the required Commerce API endpoint. It loads products or categories and renders them within CMS UI.
  3. User interacts with micro-ui and selects some product, which is saved as JSON into CMS. The saved value will be passed to the field during the next load.

Micro-UI is used here as the SPA is very small and you build custom apps for each field (or switching between them in one app).

Implementation

As you see, the integration process is pretty simple. The SPA is built on top of the create-react-app (CRA) template. It uses Contentstackā„¢ And commercetools JS SDKs and whatever frontend libraries come with CPA šŸ™‚ (this is not important).

Contentstackā„¢ loads the micro-ui in iframe, which uses ContentstackUIExtension on componentDidMount event to pul configurations and save them in components state. This state is used to pass commercetools API details. Also, SKD exposes a couple of methods to load and save a custom fields data: extensionField.field.getData() and extensionField.field.saveData(...).

Actual source code you can find in my GitHub repo.

Deployment & Hosting

Hosting of micro-uirequires at minimum a static web-share (e.g. Netlify or AWS S3 static websites), but you can use lambdas or any other option just fine. Just make sure that it is publicly accessible.

Hosting for a local machine (for development)

When you developing an extension or modifying it deploying it every time to S3 is a bit painful. As a workaround, you can use ngrok, which is a dynamic proxy for your application.

Its setup is as easy as running npm i -g command.

npm i ngrok -g
ngrok http 3000 # as CRA will start your dev setup on this port by default

Once ngrok started you need to put its address into Contentstack extension configuration and save it.

šŸ¤“ Note: You most likely will need to do this every time you restart the proxy as it will generate the address dynamically.

Contentstack configuration

Lastly, you need to configures your extension Contentstackā„¢ as described here.

My code uses the following parameters, where field types are category and product:

{
    "project_key": "<CT project name>",
    "domain": "commercetools.co",
    "client_id": "< client ID for CT API access >",
    "client_secret": "< client secret for CT API access >",
    "type": "< field type >"
}

Results

And this is how the solution looks like once it is all wired up. demo

As usual, follow me on Twitter @true_shoorik šŸ˜‰