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.
Read more
Check the Content Management System Overview to learn more about the features of the Builder.io module.
Bootstrapping Builder.io with Alokai Storefront
To use the Builder.io integration in your Storefront, perform the following steps:
1
Install the module
From the root of your Storefront project, run the following command:
npx @vsf-enterprise/storefront-cli add-module cms-builderio
Follow the instructions in the command line to complete the installation. This command will:
- copy Alokai Builder.io schemas to the Middleware directory,
- install the Alokai Builder.io API Client
@vsf-enterprise/builderio-apiin the Middleware, - install the Alokai Builder.io SDK module
@vsf-enterprise/builderio-sdkin your Storefront, - install the Builder.io SDK for your framework (
@builder.io/sdk-reactor@builder.io/sdk-vue) in your Storefront, - register Alokai custom components,
- setup example environment variables.
You can find the changelogs for the installed packages here:
2
Update variables (optional)
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>
Read the Builder.io docs to find out where to get your 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:
- Section Models Models,
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.
1
Navigate to the schemas directory
cd apps/storefront-middleware/sf-modules/cms-builderio/schemas
2
Run the create command:
builder create -k <your_private_key> -i <input_directory> -n <new_space_name>
Good to know
You can generate a private_key for your organization in your Builder account's organization settings. For this, you must have an admin role assigned.
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.
Next.js
Builder.io doesn't support React Server Components yet. Module as a workaround ships a custom, client component implementation for the ProductList and CategoryCard components