Setup for Alokai Storefront

This documentation explains how to get started with Bloomreach in a Alokai Storefront project.

Requirements

• Alokai Storefront project,
• Bloomreach Content environment,
• Node.js version 18.x,
• @vsf-enterprise NPM registry access.

Quick setup

Our CMS CLI allows you to connect Bloomreach Content to your Alokai Storefront by executing a single command combination from the root of your project:

npx @vsf-enterprise/cms-cli bloomreach-content:components -u -f next && npx @vsf-enterprise/cms-cli bloomreach-content:storefront -f next

For a full list and detailed descriptions of available arguments and flags, run:

npx @vsf-enterprise/cms-cli bloomreach-content --help

If quick setups are not your thing and you would like to have a full understanding of the process, follow the Step by step guide.

Step-by-step setup

Installing the Bloomreach Content integration in an Alokai Storefront project requires:

• importing integration components,
• installing integration dependencies,
• adding Bloomreach Content configuration to the framework configuration file,
• adding Bloomreach Content module to the SDK,

This chapter will describe all these steps in more detail.

Importing integration components

From the root of your project, run the following command:

npx @vsf-enterprise/cms-cli bloomreach-content:components -u -f next

This will create (or overwrite) the following files in your project:

  └── apps
      └── storefront-unified-nextjs
          ├── components
          │   └── cms
          │       ├── layout
          │       │   ├── Footer.tsx
          │       │   └── MegaMenu.tsx
          │       ├── page
          │       │   ├── Accordion.tsx
          │       │   ├── Banner.tsx
          │       │   ├── Card.tsx
          │       │   ├── CategoryCard.tsx
          │       │   ├── Editorial.tsx
          │       │   ├── Gallery.tsx
          │       │   ├── Grid.tsx
          │       │   ├── Hero.tsx
          │       │   ├── NewsletterBox.tsx
          │       │   ├── ProductCard.tsx
          │       │   └── Scrollable.tsx
          │       └── wrappers
          │           ├── BRXComponent.tsx
          │           └── RenderComponent.tsx
          ├── layouts
          │   └── BloomreachLayout.tsx
          └── pages
              └── [[...slug]].tsx

Installing dependencies

The integration requires a few additional dependencies to run, including SDKs provided by Bloomreach and supplementary packages related to Storefront UI or agnostic CMS components.

Navigate to the frontend directory:

cd apps/storefront-unified-nextjs

and run

yarn add @bloomreach/spa-sdk @bloomreach/react-sdk axios @vsf-enterprise/cms-components-utils @vsf-enterprise/bloomreach-content-sdk

Framework configuration

The next step is adding the bloomreachContent configuration to your frontend framework configuration file. It should contain the name of your Bloomreach Content environment and the name of the channel you want to fetch the data from.

In the /apps/storefront-unified-nextjs directory, add the following lines to the runtimeConfig object in your next.config.js file:

module.exports = {
  // ...
  publicRuntimeConfig: {
    bloomreachContent: {
      environmentName: 'vuestorefront',
      channel: 'en'
    }
  }
}

To connect to your Bloomreach Content environment, replace environmentName and channel values with your Bloomreach Content environment credentials.

// [[...slug]].tsx

import getConfig from 'next/config';

export const getServerSideProps = async ({
  req: request,
  resolvedUrl: path,
+ locale: channel,
}: GetServerSidePropsContext) => {
  const { publicRuntimeConfig } = getConfig();
  const {
    environmentName,
-   channel
  } = publicRuntimeConfig.bloomreachContent;
};

Configuring the SDK

The last step in the installation process is configuring Alokai SDK for Bloomreach Content in your frontend application. It ships with handy utility functions responsible for resolving raw data from Bloomreach.

In the /apps/storefront-unified-nuxt directory, find the sdk.config.ts file and initialize the Bloomreach Content Module with the following lines:

import { BloomreachContentModuleType, bloomreachContentModule } from '@vsf-enterprise/bloomreach-content-sdk';

export default defineSdkConfig(({ buildModule, middlewareUrl, getCookieHeader }) => ({
  // ...
  bloomreachContent: buildModule<BloomreachContentModuleType>(bloomreachContentModule),
}));

Now your Bloomreach Content SDK is ready for take off. To see a full list of available methods, check out the API Reference.

What next?

With your frontend configured, the last thing to do is Bootstrapping your Bloomreach Content environment.