Vue Storefront is now Alokai! Learn More
Quick start

Quick start


  • Install Node.js version 16.x

Using the integration

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

Middleware preparation

  1. Install the API Client to communicate with Bloomreach Discovery. This package is used to create a server-to-server connection with the Bloomreach Discovery backend and the server middleware.
yarn add @vsf-enterprise/bloomreach-discovery-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: {
    brd: {
      location: '@vsf-enterprise/bloomreach-discovery-api/server',
      configuration: {
        endpoint: 'https://endpoint.url/graphql',
        envId: 'your_account_env_id',
  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 Bloomreach Discovery module. It extends the SDK core with methods to communicate with Bloomreach Discovery.
yarn add @vsf-enterprise/bloomreach-discovery-sdk
  1. Initialize the SDK. Configure Bloomreach Discovery module with apiUrl that points to the server middleware.
import { initSDK, buildModule } from '@vue-storefront/sdk'
import { bloomreachDiscoveryModule } from '@vsf-enterprise/bloomreach-discovery-sdk'

const sdkConfig = {
  brd: buildModule(bloomreachDiscoveryModule, {
    apiUrl: 'http://localhost:8181/brd',

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