Installation
By default, Alokai integration for Storyblok 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),
- Storyblok environment,
- Node.js version
22.14.0
or higher, - @vsf-enterprise NPM registry access.
Bootstrapping Storyblok
Before you start using our Storyblok integration, you need to bootstrap your Storyblok space with Alokai schemas. These schemas are aligned with our out-of-the-box frontend components and are required for the integration to work properly.
The bootstrapping process includes prerequisites and space preparation, importing integration schemas, setting up the Visual Editor, and managing content types. For detailed instructions, please refer to our Bootstrapping Storyblok guide.
If you don't have an Storyblok space yet, we suggest you Try For Free on the storyblok website.
Installing dependencies
In your frontend application, install the following dependencies:
yarn add @vsf-enterprise/storyblok-sdk
In your Server Middleware application, install the following dependencies:
yarn add @vsf-enterprise/storyblok-api
Adding environment varialbes
In the .env
file of your Server Middleware application, add the following envioronment variables:
STORYBLOK_ACCESS_TOKEN=<YOUR_STORYBLOK_ACCESS_TOKEN>
STORYBLOK_PREVIEW_MODE=true || false
Read the Storyblok docs to find out where to get your SpaceId
Configuring Server Middleware
The next step is configuring the Storyblok 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 } from "@vsf-enterprise/storyblok-api";
import type { Integration } from "@vue-storefront/middleware";
const { STORYBLOK_ACCESS_TOKEN, STORYBLOK_PREVIEW_MODE } = process.env;
if (!STORYBLOK_ACCESS_TOKEN) throw new Error("Missing env var: STORYBLOK_ACCESS_TOKEN");
if (!STORYBLOK_PREVIEW_MODE) throw new Error("Missing env var: STORYBLOK_PREVIEW_MODE");
export default {
integrations: {
storyblok: {
location: "@vsf-enterprise/storyblok-api/server",
configuration: {
bridge: STORYBLOK_PREVIEW_MODE === "true",
apiOptions: {
accessToken: STORYBLOK_ACCESS_TOKEN,
region: "ap",
cache: {
type: "memory",
},
},
unified: {
resolvePages: () => ({
"/*": {},
}),
resolveFallbackPage: () => ({
path: "fallback-page",
}),
},
},
} satisfies Integration<MiddlewareConfig>,
},
};
Configuring Alokai SDK
The last step in the process is configuring Alokai SDK for Storyblok 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 type { UnifiedCmsEndpoints } from "@sf-modules-middleware/cms-storyblok";
export const unifiedCms = defineSdkModule(({ buildModule, config, getRequestHeaders, middlewareModule }) =>
buildModule(middlewareModule<UnifiedCmsEndpoints>, {
apiUrl: `${config.apiUrl}/cms/unified`,
ssrApiUrl: `${config.ssrApiUrl}/cms/unified`,
defaultRequestConfig: {
headers: getRequestHeaders(),
},
}),
);
import { defineSdkModule } from '@vue-storefront/next';
import { storyblokModule } from '@vsf-enterprise/storyblok-sdk';
export const storyblok = defineSdkModule(({ buildModule, config, getRequestHeaders }) =>
buildModule(storyblokModule, {
apiUrl: `${config.apiUrl}/cms`,
ssrApiUrl: `${config.ssrApiUrl}/cms`,
defaultRequestConfig: {
headers: getRequestHeaders(),
},
}),
);
export * from './unified-cms';
export * from './storyblok';
// ... other module exports