Quick start

Prerequisites

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

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

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: {
    brd: {
      location: '@vsf-enterprise/bloomreach-discovery-api/server',
      configuration: {
        endpoint: 'https://endpoint.url/graphql',
        envId: 'your_account_env_id',
      },
    },
  },
}

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 Bloomreach Discovery module. It extends the SDK core with methods to communicate with Bloomreach Discovery.

yarn add @vsf-enterprise/bloomreach-discovery-sdk

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)

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.