Vue Storefront is now Alokai! Learn More
Quick start

Quick start


  • SalesForce Commerce Cloud configured - if you don't have your SalesForce 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 SFCC 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 SalesForce Customer Cloud. This package is used to create a server-to-server connection with the SalesForce Commerce Cloud backend and the server middleware.
yarn add @vsf-enterprise/sfcc-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: {
    sfcc: {
      location: "@vsf-enterprise/sfcc-api/server",
      configuration: {
        cache: process.env.SFCC_CACHE !== "false",
        timeout: process.env.SFCC_TIMEOUT || 10000,
        origin: process.env.SFCC_ORIGIN,
        siteId: process.env.SFCC_SITE_ID,
        scapiClientId: process.env.SFCC_SCAPI_CLIENT_ID,
        slasClientId: process.env.SFCC_SLAS_CLIENT_ID,
        slasClientSecret: process.env.SFCC_SLAS_CLIENT_SECRET,
        ocapiClientId: process.env.SFCC_OCAPI_CLIENT_ID,
        scapiClientSecret: process.env.SFCC_SCAPI_CLIENT_SECRET,
        ocapiClientSecret: process.env.SFCC_OCAPI_CLIENT_SECRET,
        ocapiVersion: process.env.SFCC_OCAPI_VERSION,
        commerceApiVersion: process.env.SFCC_SCAPI_VERSION || "v1",
        shortCode: process.env.SFCC_SHORT_CODE,
        organizationId: process.env.SFCC_ORGANIZATION_ID,
        viewType: process.env.SFCC_PRODUCT_IMAGE_VIEW_TYPE,

        ocapiEndpoints: {
          updatePaymentInstrumentInBasket: true, // The SCAPI method is broken

        cookieNames: {
          siteId: process.env.SFCC_COOKIES_SITE_ID || "vsf-sfcc-site-id",
          amAuthToken: process.env.SFCC_COOKIES_AM_TOKEN || "vsf-sfcc-am-token",
            process.env.SFCC_COOKIES_SCAPI_TOKEN || "vsf-sfcc-scapi-token",
            process.env.SFCC_COOKIES_SCAPI_REFRESH_TOKEN ||
            process.env.SFCC_COOKIES_OCAPI_TOKEN || "vsf-sfcc-ocapi-token",
          currency: process.env.SFCC_COOKIES_CURRENCY || "vsf-sfcc-currency",
          locale: process.env.SFCC_COOKIES_LOCALE || "vsf-sfcc-locale",
          usid: process.env.SFCC_COOKIES_USID || "vsf-sfcc-usid",

        clientHeaders: {
            process.env.SFCC_CLIENT_HEADERS_SITE_ID || "x-vsf-sfcc-site-id",
            process.env.SFCC_CLIENT_HEADERS_AM_TOKEN || "x-vsf-sfcc-am-token",
            process.env.SFCC_CLIENT_HEADERS_SCAPI_TOKEN ||
            process.env.SFCC_CLIENT_HEADERS_OCAPI_TOKEN ||
            process.env.SFCC_CLIENT_HEADERS_CURRENCY || "x-vsf-sfcc-currency",
          locale: process.env.SFCC_CLIENT_HEADERS_LOCALE || "x-vsf-sfcc-locale",
          usid: process.env.SFCC_CLIENT_HEADERS_USID || "x-vsf-sfcc-usid",

        callbacks: {
          auth: {
            onPasswordResetTokenGenerated({ token, email, login, phone, siteId, customerId, codeVerifier }) {
              // This is an example implementation for demo purposes.
              // In a real scenario, the token should be sent to the customer here (e.g. an email and phone are available in the payload),
              // and the token MUST NOT be exposed to the client
              return { token, email, login, phone, siteId, customerId, codeVerifier };
  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) => === 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 SalesForce Commerce Cloud module. It extends the SDK core with methods to communicate with SalesForce Commerce Cloud.
yarn add @vsf-enterprise/sfcc-sdk
  1. Initialize the SDK. Configure SalesForce Commerce Cloud module with apiUrl that points to the server middleware.
import { initSDK, buildModule } from "@vue-storefront/sdk";
import { sfccModule } from "@vsf-enterprise/sfcc-sdk";

const sdkConfig = {
  sfcc: buildModule(sfccModule, {
    apiUrl: "http://localhost:8181/sfcc"

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


Need more types? Extending the SalesForce Commerce Cloud integration? You might need the @vsf-enterprise/sfcc-types package, which includes the definitions of the types of SalesForce Commerce Webservices.