Builder.io

Builder.io accelerates the development with AI-powered design-to-code, visual editing, and enterprise CMS. This guide presents how to add the Builder.io module to your Storefront.

Bootstrapping Builder.io with Alokai Storefront

Update variables

By default, the module installation will connect your Storefront to our demo Builder.io space. To connect it to a different space, update both .env.example and .env files in the Middleware directory.

- BUILDERIO_API_KEY=<alokai-builderio-api-key>
+ BUILDERIO_API_KEY=<your-builderio-api-key>

Make sure you have bootstrapped your Builder.io space before connecting it to your Storefront.

Bootstrapping Builder.io

Before you start using our Builder.io integration with your Builder.io space, you need to import Alokai schemas for:

• Page Models,
• Section Models Models,
• Custom Components.

Importing model schemas

If you have installed the Builder.io module in your Storefront, you will find the default model schemas provided by Alokai in the apps/storefront-middleware/sf-modules/cms-builderio/schemas directory. To import the models into your own Builder.io space, use the CLI tool provided by Builder.io.

cd apps/storefront-middleware/sf-modules/cms-builderio/schemas

builder create -k <your_private_key> -i <input_directory> -n <new_space_name>

As a result, the default content models will appear in your Builder.io space:

Importing custom components

Builder.io ships with a set of default, built-in components. Alokai extends this set with custom frontend components which are already registered in the code. There is no further action required.