Setting Cloud Region | Yext Hitchhikers Platform

Introduction

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 our 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, we import CloudRegion and CloudChoice from @yext/search-headless-react and pass them as props to our config object. We change the default region from US to EU and use the default cloud.

// 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")
)

Back

< Using a Sandbox Account

Styling Without Tailwind >

<% elem.innerText %>