When using Search UI React, developers can optionally set what region and what cloud provider their search experience and data is stored in. These preferences can be configured in the HeadlessConfig which is passed to the SearchHeadlessProvider component.

For cloud region, developers will have two options: US and EU (experiences will default to US).

For cloud choice, developers will have two options:

• GLOBAL_MULTI (default): The frontend will be able to use any of the consumer serving regions powered by AWS or GCP.
• GLOBAL_GCP: Limit queries to only use the GCP-based regions. Setting this value with the EU region will direct analytics events to a GCP-only events URL.

Note: All serving in the EU only uses GCP.

Example

In the below example, CloudRegion and CloudChoice are imported from @yext/search-headless-react and passed as props to the config object. The default region is changed from US to EU and the default cloud is used.

// main.tsx
// Using React 17

import {
  provideHeadless,
  SearchHeadlessProvider,
  HeadlessConfig,
  CloudRegion,
  CloudChoice
} from "@yext/search-headless-react";
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

const config: HeadlessConfig = {
  apiKey: "YOUR API KEY",
  experienceKey: "YOUR EXPERIENCE KEY",
  locale: "en",
  verticalKey: "YOUR VERTICAL KEY",
  cloudRegion: CloudRegion.EU,
  cloudChoice: CloudChoice.GLOBAL_MULTI
};

const searcher = provideHeadless(config);

ReactDOM.render(
  <React.StrictMode>
    <SearchHeadlessProvider searcher={searcher}>
      <App />
    </SearchHeadlessProvider>
  </React.StrictMode>,
  document.getElementById("root")
)