Configuring your Application for Search | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will:

Configure your application to use Search UI React

Overview

Under the hood, Search UI React is using the Yext Search API to make search query requests and display search results. To successfully make these requests, you need to add your Search experience credentials to your front-end configuration.

1. Get Your Configuration Information

Navigate to the Experience Details screen within your Sandbox account. Here, you will see your Search API Key and Experience Key.

2. Configure Your Application

Add some code to src/templates/search.tsx to configure your static template for search.

Note

Don’t forget to replace the apiKey value with your Search API Key!

// src/templates/search.tsx

import * as React from "react";
import {
  Template,
  GetPath,
  TemplateRenderProps,
  GetHeadConfig,
  HeadConfig,
  TemplateProps,
} from "@yext/pages";
import "../index.css";
import {
  SearchHeadlessProvider,
  provideHeadless,
  HeadlessConfig,
  Environment,
} from "@yext/search-headless-react";

export const getPath: GetPath<TemplateProps> = () => {
  return "search";
};

export const getHeadConfig: GetHeadConfig<
  TemplateRenderProps
> = (): HeadConfig => {
  return {
    title: `Turtlehead Tacos Search`,
    charset: "UTF-8",
    viewport: "width=device-width, initial-scale=1",
  };
};

const headlessConfig: HeadlessConfig = {
  apiKey: "Your_Search_API_Key",
  experienceKey: "turtlehead",
  locale: "en",
  verticalKey: "faqs",
  environment: Environment.SANDBOX,
};

const searcher = provideHeadless(headlessConfig);

const Search: Template<TemplateRenderProps> = () => {
  return <SearchHeadlessProvider searcher={searcher}></SearchHeadlessProvider>;
};

export default Search;

Let’s review what you just added:

Imports that you need from @yext/search-headless-react
The headlessConfig object contains all the required fields (apiKey, experienceKey, locale) you need for configuring a search experience. The optional verticalKey field has a value of “faqs” which means that any search from the SearchBar will trigger a Vertical Query on the FAQs vertical. Since you’re using a Sandbox account, you’re also passing the sandbox environment to override the default search endpoints.
provideHeadless instantiates the searcher object which is a SearchHeadless instance.
The searcher is passed to the SearchHeadlessProvider. Any component wrapped by the provider will have access to the SearchHeadless hooks.

In the next unit, you’ll add some components to your template.

Note

You only need to add the Sandbox environment to the HeadlessConfig if you’re using a Sandbox account.

unit Quiz

+20 points

Daily Quiz Streak: 0

Quiz Accuracy Streak: 0

Question 1 of 2

Which of the following is NOT a required field in the headlessConfig object?

verticalKey

experienceKey

apiKey

locale

Question 2 of 2

Which Search Headless React hook did you just use to instantiate a new SearchHeadless instance?

useSearchState

provideHeadless

useSearchActions

launchRocket

Soon you'll be your brand's hero! 🎓

You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.

1^st attempt

0 incorrect

Feedback

<% elem.innerText %>