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
- Server Middleware application (latest version),
- Builder.io space,
- Node.js version
22.14.0
or higher, - @vsf-enterprise NPM registry access.
Bootstrapping Builder.io
Before you start using our Builder.io integration, you need to bootstrap your Builder.io space with Alokai schemas. These schemas include Page Models, Section Models, and Custom Components that are aligned with our out-of-the-box frontend components.
The bootstrapping process includes importing model schemas using Builder.io CLI and setting up custom components. For detailed instructions, please refer to our Bootstrapping Builder.io guide.
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 add @vsf-enterprise/builderio-sdk @builder.io/sdk-react
In your Server Middleware application, install the following dependencies:
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.
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 SDK modules:
import { defineSdkModule } from '@vue-storefront/next';
import { builderioModule } from '@vsf-enterprise/builderio-sdk';
export const builderio = defineSdkModule(({ buildModule, config, getRequestHeaders }) =>
buildModule(builderioModule, {
apiUrl: `${config.apiUrl}/builderio`,
ssrApiUrl: `${config.ssrApiUrl}/builderio`,
defaultRequestConfig: {
headers: getRequestHeaders(),
},
}),
);
export * from './builderio';
// ... other module exports