Quick start

Prerequisites

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.

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

Install @vue-storefront/middleware package. This package is used to create the server middleware.

yarn add @vue-storefront/middleware

Create a file middleware.config.js with server middleware configuration.

// middleware.config.js

require('dotenv').config();

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
        }
      }
    }
  }
};

Configure environment variables in your .env file.

# .env

SAPCC_OAUTH_URI=
SAPCC_OAUTH_CLIENT_ID=
SAPCC_OAUTH_CLIENT_SECRET=
SAPCC_OAUTH_TOKEN_ENDPOINT=
SAPCC_OAUTH_TOKEN_REVOKE_ENDPOINT=
SAPCC_API_URI=

DEFAULT_BASE_SITE_ID=
DEFAULT_CATALOG_ID=
DEFAULT_CATALOG_VERSION=
DEFAULT_LANGUAGE=
DEFAULT_CURRENCY=

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] ?? '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}`);
  });
})();

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.

Install the SDK package. It's the core of the SDK.

yarn add @vue-storefront/sdk

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

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 = {
  sapcc:
    buildModule(
      sapccModule,
      {
        apiUrl: 'http://localhost:8181/sapcc',
        ssrApiUrl: 'http://localhost:8181/sapcc'
      }
    )
};

export const sdk = initSDK(sdkConfig);

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.

OpenAPI SDK

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.