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 GCPGLOBAL_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")
)
Feedback
<% elem.innerText %>