Configuration

Prerequisites

Before following this guide, make sure you have an already configured SAP Commerce Cloud project. It includes creating and configuring:

• at least one Website in WCMS > Websites tab,
• at least one Base Store connected to your Website in Base Commerce > Base Store tab,
• an OAuth Client in System > OAuth > OAuth Clients tab,
• a Catalog in the Catalog > Catalogs tab,
• a Catalog version in the Catalog > Catalog Versions tab.

Middleware configuration

Let's focus on the middleware.config.js file. It is used by the middleware to communicate with SAP's Authorization Server and OCC API.

// 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
                },
                logger // configuration, see below
            }
        }
    }
};

OAuth

Configuration required by Vue Storefront to retrieve application and customer tokens from the SAP authorization server.

• clientId: client id of your OAuth Client.
• clientSecret: client secret of your OAuth Client.
• uri: full OAuth server uri (e.g. https://<your-sap-api>/authorizationserver/).
• tokenEndpoint: endpoint for retrieving and refreshing customer/application tokens (e.g. /oauth/token).
• tokenRevokeEndpoint: endpoint for revoking customer tokens (e.g. /oauth/revoke).
• cookieOptions: object that can be used to overwrite options of the vsf-sap-token cookie. It is merged with the default configuration. Available options are listed in the cookie module documentation

API

Configuration required by Vue Storefront to exchange commerce data (products, categories etc.) with the SAP OCC API. It contains the defaults Base Store configuration.

• uri: full OCC API uri (e.g. https://<your-sap-api>/occ/v2).
• baseSiteId: first and decisive parameter of every request (e.g. electronics).
• baseStoreUid: unique identifier of the Base Store. Can be skipped if the uid of your Base Store and the uid of your Base Site are the same.
• catalogId: main catalog id (e.g. electronicsProductCatalog).
• catalogVersion: main catalog version (e.g. Online).
• defaultCurrency: isocode of the default currency for the current Base Store (e.g. USD). Will be sent to OCC API if no vsf-currency cookie comes from the frontend (e.g. during the first-page load).
• defaultLanguage: isocode of the default language for the current Base Store (e.g. EN). Will be sent to OCC API if no vsf-locale cookie comes from the frontend (e.g. during the first-page load).

Logger

Configuration of the logger used by the integration. It is optional and can be skipped.

• Using the configuration you can overwrite the default logger with your own implementation. The logger must implement the Logger interface.

// middleware.config.js
module.exports = {
    integrations: {
        sapcc: {
            location: '@vsf-enterprise/sapcc-api/server',
            configuration: {
                //...
                logger: {
                    debug: (message, ...args) => {
                        // your implementation
                        // eg.console.log(message, ...args);
                    },
                    error: (message, ...args) => {
                        // your implementation
                        // eg.console.log(message, ...args);
                    },
                    info: (message, ...args) => {
                        // your implementation
                        // eg.console.log(message, ...args);
                    },
                    success: (message, ...args) => {
                        // your implementation
                        // eg.console.log(message, ...args);
                    },
                }
                //...
            }
        }
    }
};

• You can disable the logger by setting the value to false. It will mute all logs.

// middleware.config.js
module.exports = {
    integrations: {
        sapcc: {
            location: '@vsf-enterprise/sapcc-api/server',
            configuration: {
                //...
                logger: false
                //...
            }
        }
    }
};

You can find the baseSiteId in your SAPCC Administration Cockpit: