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 sdk.ts and add the following code:

import { Endpoints } from "@vsf-enterprise/sapcc-api";
import { CreateSdkOptions, createSdk } from "@vue-storefront/next";

const options: CreateSdkOptions = {
  middleware: {
    apiUrl: "http://localhost:8181",
  },
};

export const { getSdk } = createSdk(
  options,
  ({ buildModule, config, middlewareModule, getRequestHeaders }) => ({
    sapcc: buildModule(middlewareModule<Endpoints>, {
      apiUrl: config.middlewareUrl + "/sapcc",
      defaultRequestConfig: {
        headers: getRequestHeaders(),
      },
    }),
  })
);

In this file we tell the SDK where the middleware resides and what Endpoints are exposed by it. This is the part that ensures type-safety across the application.

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

Summary

In this section, we have installed and configured Alokai Connect.

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.