Middleware & SDK setup

The last step in the installation process is configuring Server Middleware and SDK in your frontend application. You will need them to communicate with Contentful's Delivery API and fetch dynamic data which fuels your frontend components.

Middleware setup

In this part of the guide, you are going to install some dependencies and create a few files. If your project follows a standard directory structure (e.g. the default one for Nuxt or Next), simply add the files in the root of your project. If it has separate directories for frontend and backed code, add the files in the root of the backend directory.

Start with installing the @vue-storefront/middleware package. It is a foundation of Vue Storefront's Server Middleware. Make sure you're using version 3.3.0 or higher:

yarn add @vue-storefront/middleware

Next, install the @vsf-enterprise/contentful-api package. It augments the Server Middleware with Contentful-specific endpoints required by the integration:

yarn add @vsf-enterprise/contentful-api

With both libraries in place, create a middleware.config.js file to register Contentful integration in your Server Middleware. Replace <contentful_space_id> and <contentful_access_token> with your space's credentials:

// middleware.config.js

module.exports = {
  integrations: {
    cntf: {
      location: '@vsf-enterprise/contentful-api/server',
      configuration: {
        space: '<contentful_space_id>',
        token: '<contentful_access_token>',
      },
    },
  },
};

With the configuration file in place, we need a script which will import it and spin up the Server Middleware on a dedicated port. Let's create it and name it middleware.js:

// middleware.js

const { createServer } = require('@vue-storefront/middleware');
const { integrations } = require('./middleware.config');
const cors = require('cors');

(async () => {
  const app = await createServer({ integrations });
  // By default it's running on the localhost.
  const host = process.argv[2] ?? '0.0.0.0';
  // By default it's running on the port 8181.
  const port = process.argv[3] ?? 8181;
  const CORS_MIDDLEWARE_NAME = 'corsMiddleware';

  const corsMiddleware = app._router.stack.find(
    (middleware) => middleware.name === CORS_MIDDLEWARE_NAME
  );

  // You can overwrite the cors settings by defining allowed origins.
  corsMiddleware.handle = cors({
    origin: ['http://localhost:3000'],
    credentials: true,
  });

  app.listen(port, host, () => {
    console.log(`Middleware started: ${host}:${port}`);
  });
})();

Now your Server Middleware should be ready for take off. You can start it by running node middleware.js. Verify it is running as expected by sending a test request from your terminal:

curl --request POST 'http://localhost:8181/cntf/getEntries'

SDK setup

In this part of the guide, you are going to - once again - install some dependencies and create a few files. If your project follows a standard directory structure (e.g. the default one for Nuxt or Next), simply add the files in the root of your project. If it has separate directories for frontend and backed code, add the files in the root of the frontend directory.

Start with installing the @vue-storefront/sdk package. Make sure you're using version 1.1.0 or higher.

yarn add @vue-storefront/sdk

Next, install the Contentful SDK module. It extends the SDK core with methods responsible for communication with the Server Middleware and - in turn - with Contentful's Delivery API.

yarn add @vsf-enterprise/contentful-sdk

With both libraries in place, create a new sdk.config.ts file. Use it to initialize the SDK and configure the Contentful module. apiUrl should point to the address of your Server Middleware you spun up at the end of the previous section.

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

const sdkConfig = {
  contentful: buildModule<ContentfulModuleType>(contentfulModule, {
    apiUrl: 'http://localhost:8181/cntf',
  }),
};

export const sdk = initSDK(sdkConfig);

Now your SDK is ready for take off as well. To see a full list of available methods, check out the API Reference. You can give it a try with the getEntries() method:

import { sdk } from '~/sdk.config.ts';

const entries = await sdk.contentful.getEntries();

Provided that you have configured everything properly, it should send a request to your Server Middleware, identical to the curl from the previous section of this guide.

What next?

With your frontend application ready, it's time to prepare a corresponding setup in Contentful. Luckily, Vue Storefront ships with a pre-defined set of Content Types matching your frontend components. Proceed to the Bootstrapping Contentful guide to find out how you can import them into your space.