Quick start

Prerequisites

• Magento configured - if you don't have your Magento 2 configured, see our Magento Installation guide.
• Install Node.js version >=18.0

Middleware

Install Magento 2 integration, in the storefront-middleware application:

1. Install the Magento 2 API Client. This package is used to create a connection with the Magento 2 backend and build endpoints for the server middleware.

yarn add @vsf-enterprise/magento-api

2. In the apps/storefront-middleware/integrations/magento/config directory you can find configuration files for the Magento 2 integration. You can modify them to fit your needs.
3. Configure environment variables in your .env file.

# .env

  MAGENTO_BASE_URL=https://magento2-instance.vuestorefront.io/
  MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io/graphql

Configuring the SDK

Now, let's configure the SDK in the frontend part of your application to communicate with the server middleware.

1. Initialize the SDK. Configure middlewareModule with apiUrl that points to the Magento 2 integration in the Alokai Middleware.

import { buildModule, initSDK, middlewareModule } from "@vsf-enterprise/sdk";
import { Endpoints } from "@vsf-enterprise/magento-api";

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

export const sdk = initSDK(sdkConfig);

2. Your SDK is ready! You can now import it in the different parts of your frontend application and call methods with sdk.magento.<METHOD_NAME>. To see a full list of methods offered by the Magento 2 integration, check out the API Reference.

For example, we can call the products method to fetch products from Magento 2.

import { sdk } from "./sdk";
const products = await sdk.magento.products({});
// returns ProductInterface[]