Install and Configure Alokai SDK

In the last sections, we have configured Alokai React Native 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, allow your frontend to interact with your SAP Backend. The SDK is responsible for establishing the connection with the Middleware, while Middleware is responsible to orchestrate the communication with the backend.

By using the SDK, we can have full-stack type-safety and also have predefined ways to customize data fetching.

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 react-native application. Navigate to a newly generated storefront-react-native directory and install the SDK package by running the following command:

cd storefront-react-native
yarn add @vue-storefront/sdk

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.

Before we begin, we need to install the @vsf-enterprise/sapcc-api package. This is the same package that we have installed in the storefront-middleware application. This package allows us to get the Endpoints type, which is used to define the API endpoints for SAP Commerce Cloud.

yarn add @vsf-enterprise/sapcc-api

Create a new directory in the storefront-react-native directory called sdk. Inside the sdk directory, create a new file named sdk.config.ts and add the following code:

import { initSDK, buildModule, middlewareModule } from "@vue-storefront/sdk";
import { Endpoints as SapccEndpoints } from "@vsf-enterprise/sapcc-api";

const sdkConfig = {
  sapcc: buildModule(middlewareModule<SapccEndpoints>, {
    apiUrl: "http://localhost:8181/sapcc",
    cdnCacheBustingId: "",
  }),
};

export const sdk = initSDK(sdkConfig);

And that's it!

Summary

You have successfully configured the Alokai SDK. Now, let's use it in our React Native application.

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 in React Native.