Using a Sandbox Account

Who does this article apply to?

Enterprise, Partner, and Small Business accounts.
Accounts in all regions.

Yext Sandbox accounts have a different domain for their Search API endpoints. Search UI React uses production account API endpoints by default.

If you're using a Yext sandbox account, import Environment from @yext/search-headless-react and pass the sandbox environment to the environment prop in your provideHeadless config:

// main.tsx
// using React 17

import {
  provideHeadless,
  SearchHeadlessProvider,
  HeadlessConfig,
  Environment
} 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",
  environment: Environment.SANDBOX
};

const searcher = provideHeadless(config);

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