Quick start

Quick start


  • SAP Commerce Cloud configured - if you don't have your SAP Commerce Cloud configured, see our Configuration guide.
  • Install Node.js version 16.0

Using the integration

In this section, we will explain in a step-by-step guide how to use SAPCC integration in your front-end application.

Middleware preparation

Key concept - Middleware

Middleware concept is described in detail in our Key concepts: Middleware docs.

  1. Install the API Client to communicate with SAP Customer Cloud. This package is used to create a server-to-server connection with the SAP Commerce Cloud backend and the server middleware.
yarn add @vsf-enterprise/sapcc-api
  1. Install @vue-storefront/middleware package. This package is used to create the server middleware.
yarn add @vue-storefront/middleware
  1. Create a file middleware.config.js with server middleware configuration.
// middleware.config.js


module.exports = {
  integrations: {
    sapcc: {
      location: '@vsf-enterprise/sapcc-api/server',
      configuration: {
        OAuth: {
          uri: process.env.SAPCC_OAUTH_URI,
          clientId: process.env.SAPCC_OAUTH_CLIENT_ID,
          clientSecret: process.env.SAPCC_OAUTH_CLIENT_SECRET,
          tokenEndpoint: process.env.SAPCC_OAUTH_TOKEN_ENDPOINT,
          tokenRevokeEndpoint: process.env.SAPCC_OAUTH_TOKEN_REVOKE_ENDPOINT,
          cookieOptions: {
            'vsf-sap-token': { secure: process.env.NODE_ENV !== 'development' }
        api: {
          uri: process.env.SAPCC_API_URI,
          baseSiteId: process.env.DEFAULT_BASE_SITE_ID,
          catalogId: process.env.DEFAULT_CATALOG_ID,
          catalogVersion: process.env.DEFAULT_CATALOG_VERSION,
          defaultLanguage: process.env.DEFAULT_LANGUAGE,
          defaultCurrency: process.env.DEFAULT_CURRENCY
  1. Configure environment variables in your .env file.
# .env


  1. Create a middleware.js file. This script is used to run the server middleware.
// 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] ?? '';
  // 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}`);
  1. Your middleware is ready. You can start it by running node middleware.js

SDK preparation

Key concept - SDK

SDK is described in detail in our Key concepts: SDK docs.

  1. Install the SDK package. It's the core of the SDK.
yarn add @vue-storefront/sdk
  1. Install the SAP Commerce Cloud module. It extends the SDK core with methods to communicate with SAP Commerce Cloud.
yarn add @vsf-enterprise/sapcc-sdk
  1. Initialize the SDK. Configure SAP Commerce Cloud module with apiUrl that points to the server middleware.
import { initSDK, buildModule } from '@vue-storefront/sdk';
import { sapccModule } from '@vsf-enterprise/sapcc-sdk';

const sdkConfig = {
        apiUrl: 'http://localhost:8181/sapcc',
        ssrApiUrl: 'http://localhost:8181/sapcc'

export const sdk = initSDK(sdkConfig);
  1. Your SDK is ready and you can call methods with sdk.sapcc.<METHOD_NAME>. To see a full list of methods offered by the SAP Commerce Cloud module, check out the API Reference.


Need more types? Extending the SAP Commerce Cloud integration? You might need the @vsf-enterprise/sap-commerce-webservices-sdk package, which includes the definitions of the types of SAP Commerce Webservices.