The Vue Storefront Essentials Course is now available! Learn More
CMS Configuration

CMS Configuration

Learn how to integrate a CMS integration with the Storefront Starter

Content Management System

In today's digital landscape, the content drives user engagement. As eCommerce platforms strive to deliver personalized user experiences, integrating a robust Content Management System (CMS) becomes crucial.

Significance of Content in Digital eCcommerce:

  • Engagement: Quality content captivates users, enhancing their experience and loyalty.
  • SEO: Optimized content improves search rankings, driving organic traffic.
  • Trust: Authentic content builds trust, encouraging purchases.
  • Branding: Content conveys a brand's values and identity, differentiating it from competitors.

In essence, quality content is pivotal for user engagement in eCommerce, and a robust CMS ensures efficient content delivery and management.


Available Integrations

Currently, Storefront Starter supports these CMS integrations:

It's important to note that the Unified Data Layer only supports e-commerce platforms. This means that CMS integrations are not part of the Unified Data Layer, but they can be integrated individually with your storefront.

How to Start?

All of the CMS integrations contain two main parts:

  1. An API Client that extends the middleware to interact with your CMS service.
  2. An SDK Module that extends the SDK to provide type-safe methods to interact with the Middleware.

In this guide, we'll focus on the Contentful integration. However, the process is similar for other CMS integrations. You can find specific installation guides for each integration in their documentation.

Installing the API Client (Middleware)

The first step is to configure the Contentful API Client. The API Client serves as the bridge between your application and external services, ensuring secure and efficient data transmission.

Want to read more about our architecture? Please check this architecture guide.

To configure it:

  1. Jump into the configuration in apps/storefront-middleware app.
  2. Install Contenful dependencies.
yarn add @vsf-enterprise/contentful-api
  1. Open the middleware.config.ts file and input the required details.

Keep in mind, different CMS platforms have their own unique secrets and environmental variables. If you're unsure about what to input, it's recommended to refer to the module's documentation. Typically, these documents provide general examples that can guide you in populating the right information.

/* middleware.config.json */

const config = {
  integrations: {
    cntf: {
      location: '@vsf-enterprise/contentful-api/server',
      configuration: {
        space: process.env.CNTF_SPACE,
        token: process.env.CNTF_TOKEN,
        environment: process.env.CNTF_BRANCH,
      },
    },
    ... // other integrations
  },
};

From our setup, you'll notice that we've utilized environmental variables. For enhanced security in your connections, we strongly advise following a similar approach. To do so just add these to your .env file.

# contentful delivery token
CNTF_TOKEN=
# contentful space
CNTF_SPACE=
# contentful branch
CNTF_BRANCH=

Please remember that other CMS platforms, such as Contentstack, may require a unique setup when incorporating the API Client. This is because different platforms often have distinct architectures, features, and security protocols. Adhering to each platform's specific requirements ensures optimal integration, performance, and security. To check detailed configuration please refer to the integration documentation.


Adding the SDK Module

Now, in our frontend application, we can add our Contentful SDK Module.

  1. Install the CMS SDK Module.
yarn workspace storefront-unified-nextjs add @vsf-enterprise/contentful-sdk

yarn workspace storefront-unified-nuxtjs add @vsf-enterprise/contentful-sdk
  1. Open apps/storefront-unified-nextjs/sdk/index.ts file.
  2. Add the new module inside initSDK function (SDK entry point).
/* sdk/index.ts */

import { contentfulModule, ContentfulModuleType } from '@vsf-enterprise/contentful-sdk';

const sdkConfig = {
  contentful: buildModule<ContentfulModuleType>(contentfulModule, {
    apiUrl: `${API_BASE_URL}/contentful`,
  }),
  ... // other modules
};

export const sdk = initSDK<typeof sdkConfig>(sdkConfig);

You may want to add API_BASE_URL to your environmental variables as a global one.But, yoou can always use hardcode an API URL like http://localhost:4000.

Now, the Contentful SDK methods will be available in sdk.contentful.{methodName}. This will allow you to interact with the Contentful API from your storefront.

With the introduction of the new module, integrating and transitioning between different CMS platforms will be notably straightforward. You'll be just switching between the different configuration (variables) and module names. That's it.

Next Steps

To help you get started with CMS integrations, our CLI tool will help you inject pre-configured UI Component and content models for your application. This can help accelerate development by providing a starting point for your CMS integration.

Adding New Components

To use the CLI:

  1. Open apps/storefront-unified-nextjs or apps/storefront-unified-nuxtjs directory in your terminal
  2. Run the following command.
npx @vsf-enterprise/cms-cli [cms-name] [platform]
  • [cms-name] - i.e. contentful
  • [platform] - i.e. nuxt

This will create (or overwrite) the following files in your project.

├── components
│   └── cms
│       ├── page
│       │   ├── Accordion.[tsx/vue]
│       │   ├── Banner.[tsx/vue]
│       │   ├── Card.[tsx/vue]
│       │   ├── Editorial.[tsx/vue]
│       │   ├── Gallery.[tsx/vue]
│       │   ├── Grid.[tsx/vue]
│       │   ├── Hero.[tsx/vue]
│       │   ├── NewsletterBox.[tsx/vue]
│       │   ├── ProductCard.[tsx/vue]
│       │   └── Scrollable.[tsx/vue]
│       └── wrappers
│           └── RenderComponent.[tsx/vue]
└── schemas
    └── schemas.json

How the Components Work?

We utilize the RenderContent.[tsx/vue] component to manage, gather, and showcase all components powered by the CMS. This component will be located in the /cms/wrappers directory. Inside, you'll discover a comprehensive list of components available for use in this Storefront Starter. Naturally, you have the flexibility to incorporate additional ones as needed.

Creating Components

To learn how to add more components to the Contentful please check the documentation here.

This process will be different for the other CMS systems as it's unique for each integration.

Content Types and Schemas

The primary difference between integrations may be the location of the Content Models and their corresponding Schemas. It's recommended to centralize these schemas in one location.

When tweaking the CMS settings, be it altering available languages or adjusting component structures, it's recommended to first update the [cms]/schema.json file before incorporating it into the CMS environment.

This approach minimizes discrepancies between your project and reduces the likelihood of manual interventions in the CMS dashboard.

By default, the schema files will be added to the /schemas folder, we recommending to move them to CMS dedicated folder.

To read more about bootstrapping Components and Content Models within the selected CMS system please refer to the documentations of the certain modules.