Vue Storefront is now Alokai! Learn More
Installation

Installation

By default, Alokai integration for Builder.io is meant to be used as a Storefront module. However, it can also be installed in any Next or Nuxt application.

Requirements

If you don't have a Builder space yet, we suggest you get in touch with Builder.io team and request a demo.

Installing dependencies

In your frontend application, install the following dependencies:

yarn
yarn add @vsf-enterprise/builderio-sdk @builder.io/sdk-react

In your Server Middleware application, install the following dependencies:

yarn
yarn add @vsf-enterprise/builderio-api

Adding environment varialbes

In the .env file of your Server Middleware application, add the following envioronment variables:

BUILDERIO_API_KEY=<YOUR_BUILDERIO_API_KEY>

Read the Builder docs to find out where to get your API Key.

Configuring Server Middleware

The next step is configuring the Builder.io integration in the Server Middleware.

Key concept - Server Middleware

Middleware concept is described in detail in our Key concepts: Server Middleware docs.

Add the following configuration to your Server Middleware configuration file.

middleware.config.ts
import type { MiddlewareConfig as BuilderioMiddlewareConfig } from "@vsf-enterprise/builderio-api";
import type { Integration } from "@vue-storefront/middleware";

const { BUILDERIO_API_KEY } = process.env;

if (!BUILDERIO_API_KEY) throw new Error("Missing env var: BUILDERIO_API_KEY");

export default {
  integrations: {
    builderio: {
      location: "@vsf-enterprise/builderio-api/server",
      configuration: {
        apiKey: BUILDERIO_API_KEY,
        unified: {
          resolvePages: () => Promise.resolve({
            '/category/*': {
              type: 'sections',
              model: [
                { name: 'category-top', key: "categoryTop" },
                { name: 'category-bottom', key: "categoryBottom" }
              ]
            },
            '/*': {
              type: 'page',
              model: 'page',
            }
          }),
          resolveFallbackPage: () => Promise.resolve({
            type: 'page',
            model: 'page',
          })
        } 
      },
    } satisfies Integration<BuilderioMiddlewareConfig>
  }
};

Configuring Alokai SDK

The last step in the process is configuring Alokai SDK for Builder.io in your frontend application.

Key concept - SDK

SDK core is described in detail in our SDK docs.

Add the following configuration to your Alokai SDK configuration file:

sdk.config.ts
import { builderioModule } from '@vsf-enterprise/builderio-sdk';

export function getSdkConfig() {
  return defineSdkConfig(({ buildModule, config }) => ({
    builderio: buildModule(builderioModule, {
      apiUrl: `${config.middlewareUrl}/builderio`
    }),
  }));
}