Install and Configure Alokai SDK

In the last sections, we have configured Alokai Nuxt 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.

Install Alokai Context

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

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

Add @vue-storefront/nuxt to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@vue-storefront/nuxt"],
});

It is a dedicated Nuxt package for Alokai SDK. It simplifies the use of the SDK in Nuxt applications.

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

Create SDK Config file - sdk.config.ts in root directory of your project.

import type { Endpoints } from "@vsf-enterprise/sapcc-api";

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

Create .env file in the storefront directory with the following content:

NUXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL="http://localhost:8181"

In this files 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.