Vue Storefront is now Alokai! Learn More
Install Alokai SDK

Install and Configure Alokai SDK

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 SDK.

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.

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

Install Alokai SDK

This time we will solely focus on storefront application. Navigate to a newly generated storefront directory and install the Next.js SDK package by running the following command:

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

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

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

Configure Alokai SDK

Now that you have successfully installed the Alokai SDK 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.config.ts and add the following code:

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

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

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

Next, inside the same folder let's create sdk.ts file, where we will create SDK context that will be shared across the application:

"use client";

import { createSdkContext } from "@vue-storefront/next/client";
import { getSdk } from "./sdk.config";

export const [SdkProvider, useSdk] = createSdkContext(getSdk());

This will return an SdkProvider provider and useSdk hook, that will allow us to use the same SDK instance across client side application. In order to use our shared SDK instance, we need to wrap our Next.js application in the SdkProvider provider component. Create a new file inside the same directory named provider.tsx and add the following code inside:

"use client";

import { ReactNode } from "react";
import { SdkProvider } from "./sdk";

export function Providers({ children }: { children: ReactNode }) {
  return <SdkProvider>{children}</SdkProvider>;
}

This will return an SdkProvider provider and useSdk hook, that will allow us to use the same SDK instance across client side application.

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 succesfully configured and we can start building!

You can find complete implementation in the install-sdk branch

Summary

In this section, we have installed and configured Alokai SDK. We have created an SDK provider 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.

Next: First request with Alokai Connect

Learn how to get your first data from the SAP Commerce Cloud using Alokai Connect.