Multistore

Overview

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?

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.

Prerequisites

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 Steps

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 Overview

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

C4 diagram: Middleware component level

Sequence diagram