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

Next or Nuxt frontend with Alokai SDK installed (latest version),
Server Middleware application (latest version),
Builder.io space,
Node.js version 18.x,
@vsf-enterprise NPM registry access.

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`
    }),
  }));
}