Multistore

Overviewri:link

This guide explains how to implement a multistore solution in Alokai apps. It allows different store configurations to coexist within a single middleware instance.

How does it work?ri:link

This approach assumes that each store has its domain. The extension uses the domain name to fetch the store-specific configuration. The configuration is then merged with the base configuration. The fetched configuration is cached to avoid unnecessary requests.

Prerequisitesri:link

Ensure the following prerequisites are met for the unified multistore solution:

• It works within the Alokai infrastructure.
• Requires three headers for proper functionality:
  1. origin for client-server communication.
  2. x-forwarded-host for server-server communication.
  3. host as a fallback for server-server communication if x-forwarded-host is absent.
• The client communicating with the middleware must include these headers in requests.

Setup Stepsri:link

To configure multistore in your middleware, follow these steps:

1. Prepare multistore configuration:

• Create a multistore.config.ts file with methods:
  • fetchConfiguration({ domain }): Returns store-specific configurations based on domain.
  • mergeConfigurations({ baseConfig, storeConfig }): Merges base configuration with store-specific settings.
  • cacheManagerFactory(): Implements cache manager with get and set methods.

Example: Configuration that modifies the api parameter and uses node-cache.

import NodeCache from "node-cache";

export const multistoreConfig = {
  async fetchConfiguration(/* { domain } */) {
    return {
      "my-apparel-domain.io": {
        baseSiteId: "apparel-uk",
        defaultCurrency: "GBP",
        // ...
      },
      "my-electronics-domain.io": {
        baseSiteId: "electronics",
        defaultCurrency: "USD",
        // ...
      },
    };
  },
  mergeConfigurations({ baseConfig, storeConfig }) {
    return {
      ...baseConfig,
      api: {
        ...baseConfig.api,
        ...storeConfig,
      },
    };
  },
  cacheManagerFactory() {
    const client = new NodeCache({
      stdTTL: 10,
    });

    return {
      async get(key) {
        return client.get(key);
      },
      async set(key, value) {
        return client.set(key, value);
      },
    };
  },
};

2. Extend middleware config with multistore extension:

• Import createMultistoreExtension from @vue-storefront/multistore.
• Import multistore configuration from multistore.config.ts.
• Extend the middleware config in middleware.config.ts.

Example: Extending middleware config with multistore extension.

import { multistoreExtension } from '@vue-storefront/multistore';
import { multistoreConfig } from './multistore.config';

export default {
  integrations: {
    sapcc: {
      location: '@vue-storefront/sapcc-api/server',
      configuration: { ... },
      extensions: (predefinedExtensions) => [
        ...predefinedExtensions,
        createMultistoreExtension(multistoreConfig)
      ]
    }
  }
};

Architectural Overviewri:link

To understand how the multistore solution works, see the following diagrams:

C4 diagram: Middleware component levelri:link

Sequence diagramri:link