Install and Configure Alokai Context

In the last sections, we have configured Alokai Next.js project and installed the Alokai Middleware. In this section, we will install and configure the Alokai Context that contains both the SDK and state manager.

The Alokai SDK and Alokai Middleware together called Alokai Connect. Both SDK and Middleware are used in tandem to connect the Alokai frontend with the backend. SDK is responsible for establishing the connection with the Middleware, while Middleware is responsible to orchestrate the communication with the backend.

The state manager is a built-in feature of the Alokai Context. It allows you to manage the state of your application in a more efficient way. It is based on the Zustand and provides a set of hooks to manage the state of your application.

In this guide, we will install the Alokai Context and configure it to work with SAP Commerce Cloud and Alokai Middleware.

Install Alokai Context

This time we will solely focus on storefront application. Navigate to a newly generated storefront directory and install the @vue-storefront/next package by running the following command:

cd apps/storefront
npm install --save @vue-storefront/next

It is a dedicated Next.js package for Alokai Context. It simplifies the use of the SDK and the state across the React Server Components and Client Components.

And that's it! You have successfully installed the Alokai Context. Now let's configure it to work with SAP Commerce Cloud and Alokai Middleware.

Configure Alokai Context

Now that you have successfully installed the Alokai Context and SAP Commerce Cloud integration, you need to configure the SDK.

Create a new directory in the apps/storefront directory called sdk. Inside the sdk directory, create a new file called config.ts and add the following code:

import { Endpoints } from "@vsf-enterprise/sapcc-api";
import { defineSdkConfig } from '@vue-storefront/next';

export function getSdkConfig() {
  return defineSdkConfig(({ buildModule, config, getRequestHeaders, middlewareModule }) => ({
    sapcc: buildModule(middlewareModule<Endpoints>, {
      apiUrl: `${config.middlewareUrl}/sapcc`,
      defaultRequestConfig: {
        headers: getRequestHeaders(),
      },
    }),
  })
);

Next, inside the same folder let's create alokai-context.tsx file, where we will create Alokai context that will be shared across the application:

"use client";

import { createAlokaiContext } from '@vue-storefront/next/client';
import { User, Cart } from "@vsf-enterprise/sapcc-types";

interface SfContract {
  SfCart: Cart;
  SfCustomer: User;
  SfCurrency: string;
  SfLocale: string;
}

import type { Sdk } from './sdk.server';

export const {
  AlokaiProvider,
  useSdk,
  useSfCartState,
  useSfCurrenciesState,
  useSfCurrencyState,
  useSfCustomerState,
  useSfLocaleState,
  useSfLocalesState,
} = createAlokaiContext<Sdk, SfContract>();

This will return an AlokaiProvider provider and useSdk hook, that will allow us to use the same SDK instance across client side application. It also will return a set of hooks that will allow us to access the state of the application. In order to use our shared SDK and state instances, we need to wrap our Next.js application in the AlokaiProvider provider component. Along with initializing the AlokaiProvider you can pass initial data related to currencies and locales. Create a new file inside the same directory named provider.tsx and add the following code inside:

"use client";

import { ReactNode } from "react";
import { AlokaiProvider } from "./sdk";
import { getSdk } from "./sdk.config";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <AlokaiProvider
      initialData={{
        currencies: ['USD', 'EUR'],
        currency: ['USD'],
        locale: 'en',
        locales: ['en', 'de'],
      }}
      sdk={getSdk()}
    >
      {children}
    </AlokaiProvider>
  );
}

Now, wrap your application with <Providers> in apps/storefront/app/layout.tsx:

import { Providers } from "../sdk/provider";
// imports and metadata object stays the same

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

Don't be alarmed if you see a "use client" directive in the providers.tsx file. This will not turn your application into a client-side rendered application! All children inside the provider will be still rendered on the server-side by default. You can read more about "use client" directive in React Documentation.

Great job! Alokai Connect is successfully configured and we can start building!

Summary

In this section, we have installed and configured Alokai Context. We have created an SDK and state providers and used it in our app layout.

In the next section, we will learn how to use Alokai Connect to get the first data from SAP Commerce Cloud and how to use Alokai SDK both in React Server Components and Client Components.