Installation

This documentation covers the standalone Bloomreach Content integration and does not describe all the capabilities the Alokai ↔ Bloomreach Content setup offers. If your project is using Alokai Bloomreach Content Module, we recommend visiting its documentation instead - it provides information on unified data structure, ready-made components, and a more streamlined developer experience.

By default, Alokai integration for Bloomreach Content is meant to be used as a Storefront module. However, it can also be installed in any Next or Nuxt application.

Requirements

Next or Nuxt frontend with Alokai SDK installed (latest version),
Server Middleware application (latest version),
Bloomreach Content environment,
Node.js version 22,
@vsf-enterprise NPM registry access.

Bootstrapping Bloomreach Content

Before you start using our Bloomreach Content integration, you need to bootstrap your Bloomreach Content environment with Alokai schemas. These schemas include content types, folders, components, menus, and layouts that are aligned with our out-of-the-box frontend components.

The bootstrapping process includes generating an auth token, importing integration schemas using Bloomreach Content Manager, and setting up your environment. For detailed instructions, please refer to our Bootstrapping Bloomreach Content guide.

If you don't have a Bloomreach Content environment yet, we suggest you get in touch with Bloomreach and request a demo.

Installing dependencies

In your frontend application, install the following dependencies:

yarn

yarn add @bloomreach/spa-sdk @vsf-enterprise/bloomreach-content-sdk

In your Server Middleware application, install the following dependencies:

yarn

yarn add @vsf-enterprise/bloomreach-content-api

Configuring Server Middleware

The next step is configuring the Bloomreach Content integration in the Server Middleware.

Key concept - Server Middleware

Middleware concept is described in detail in our Key concepts: Server Middleware docs.

In the apps/storefront-middleware/integrations/bloomreach-content directory, add a config.ts file with the following content. Ensure you have set the BLOOMREACH_CONTENT_ENVIRONMENT environment variable to the name of your Bloomreach Content environment (e.g. vuestorefront):

apps/storefront-middleware/integrations/bloomreach-content/config.ts

import type { Integration } from '@alokai/connect/middleware';
import type { MiddlewareConfig } from '@vsf-enterprise/bloomreach-content-api';

const { BLOOMREACH_CONTENT_ENVIRONMENT } = process.env;

if (!BLOOMREACH_CONTENT_ENVIRONMENT)
  throw new Error('Missing env var: BLOOMREACH_CONTENT_ENVIRONMENT');

export const config = {
  configuration: {
    environment: BLOOMREACH_CONTENT_ENVIRONMENT,
  },
  location: '@vsf-enterprise/bloomreach-content-api/server',
} satisfies Integration<MiddlewareConfig>;

Then, register the integration in your middleware.config.ts:

apps/storefront-middleware/middleware.config.ts

import type { MiddlewareConfig } from '@alokai/connect/middleware';

import { config as bloomreachContentConfig } from '@/integrations/bloomreach-content/config';

export const config = {
  integrations: {
    bloomreachContent: bloomreachContentConfig,
  },
} satisfies MiddlewareConfig;

Configuring Alokai SDK

The last step in the process is configuring Alokai SDK for Bloomreach Content in your frontend application.

Key concept - SDK

SDK core is described in detail in our SDK docs.

Add the following configuration to your SDK modules:

sdk/modules/bloomreach-content.ts

import { defineSdkModule } from '@vue-storefront/next';
import { bloomreachContentModule } from '@vsf-enterprise/bloomreach-content-sdk';

export const bloomreachContent = defineSdkModule(({ buildModule, config, getRequestHeaders }) =>
  buildModule(bloomreachContentModule, {
    apiUrl: `${config.apiUrl}/bloomreachContent`,
    ssrApiUrl: `${config.ssrApiUrl}/bloomreachContent`,
    defaultRequestConfig: {
      headers: getRequestHeaders(),
    },
  }),
);

sdk/modules/index.ts

export * from './bloomreach-content';
// ... other module exports