Contentful Setup

Some Storefront Start projects start with a pre-defined configuration for Contentful CMS, but there are instances where you may need to customize this configuration to better suit the unique needs of your project.

Bootstrapping Contentful

Alokai Storefront extends the capabilities of the CMS components supplied by the @vsf-enterprise/cms-cli frontend bootstrappers. To ensure seamless alignment between the Contentful content model and these components, Alokai Storefront includes a tailored Contentful configuration. You can locate this configuration in the contentful/unified-schema.json file for easy reference and integration.

If you're adjusting the Contentful configuration, such as modifying available languages, it's recommended to update the contentful/unified-schema.json file before importing it into the CMS space. This approach helps prevent conflicts between your project and this reduces manual corrections within the Contentful panel.

Middleware

To configure your Contentful space with Alokai Storefront, update the Contentful configuration in apps/storefront-middleware app.

1. Update .env file with your Contentful credentials

### CMS
# Contentful config
CNTF_TOKEN=       # contentful delivery token
CNTF_SPACE=       # contentful space
CNTF_ENVIRONMENT= # contentful env, eg. master

2. Create a dedicated directory in the integrations directory with the name of the CMS integration. In our case it will be: contentful.
3. Then create a config.ts file and input the required details.

import type { MiddlewareConfig } from "@vsf-enterprise/contentful-api";
import type { Integration } from "@vue-storefront/middleware";

const { CNTF_TOKEN, CNTF_SPACE, CNTF_ENVIRONMENT } = process.env;

if (!CNTF_TOKEN) throw new Error("Missing env var: CNTF_TOKEN");
if (!CNTF_SPACE) throw new Error("Missing env var: CNTF_SPACE");
if (!CNTF_ENVIRONMENT) throw new Error("Missing env var: CNTF_ENVIRONMENT");

export const contentfulConfig = {
  location: "@vsf-enterprise/contentful-api/server",
  configuration: {
    token: CNTF_TOKEN,
    space: CNTF_SPACE,
    environment: CNTF_ENVIRONMENT,
  },
} satisfies Integration<MiddlewareConfig>;

4. Next, create an index.ts file in the same directory as config.ts with such an content:

export * from "./config";

5. Finally, use this configuration in the middleware.config.ts file. Import the CMS integration file, and add the config into the integrations object.

import dotenv from "dotenv";
dotenv.config();

import { sapccConfig } from "./integrations/sapcc";
import { contentfulConfig } from "./integrations/contentful";

export const config = {
  integrations: {
    cntf: contentfulConfig,
    commerce: sapccConfig,
  },
};

Automating TypeScript Type Definitions Generation from Contentful Content Models

Using cf-content-types-generator, you can automate the generation of TypeScript type definitions from the contentful/unified-schema.json file. This tool simplifies the process of creating and maintaining type definitions for your Contentful content models.

Building upon these generated type definitions, you can further enhance your workflow, making interactions with Contentful content not only safer but also more user-friendly.

npx cf-content-types-generator contentful/unified-schema.json --out contentful/types -X

Refer to the cf-content-types-generator documentation for more information about this library.