Step 3: Adding Search to Your Blog

This guide accompanies the video walk-through and will provide you with code snippets and commands used in the video.

In this video, Aaron adds search to his blog site by building a search experience in the Yext platform and using the search-ui-react library.

Want to learn more?

If you want to see the finished code from the end of this section, clone the starter repo with git clone https://github.com/YextSolutions/pages-starter-react-blog and check out the search branch with git checkout search.

Walkthrough

0:30 Navigate to Search > Overview in your account. Click Create Search Experience and name the experience blog-search.

0:44 Add blog entities to the search experience.

0:55 Once the experience is created, navigate to the Verticals page.

1:35 Add Date Posted as a searchable field and set Date Posted as sortable on the Searchable Fields grid.

1:46 Add a Default Sort Order with Type: field, Field: datePosted, and Sorting Direction: Descending. Then click Save.

2:07 Navigate to General Settings and copy the search API key.

2:17 Add the Search API Key to your .env file in the Pages project:

YEXT_PUBLIC_SEARCH_API_KEY=<YOUR_EXPERIENCE_KEY>

You can learn more about environment variables here .

2:22 Add everything you need to add the search components to your project by running:

npm i @yext/search-ui-react

Additional Step Not in Video

In tailwind.config.cjs, comment in the following two lines:

const { ComponentsContentPath } = require("@yext/search-ui-react");
ComponentsContentPath,

2:40 Create a file search-experience.tsx under src/components (Aaron already has his file created) to enable search in your project. Add the below code.

Note

Note that if you are using a production account, you won’t need the two lines with SandboxEndpoints. Aaron was using a production account and did not have these lines of code in the video. If you created a playground account for this, you are using a sandbox account.

// src/components/search-experience.tsx

import * as React from "react";
import {
  provideHeadless,
  SearchHeadlessProvider,
  SandboxEndpoints // remove if using a production account
} from "@yext/search-headless-react";

const SEARCH_API_KEY = import.meta.env.YEXT_PUBLIC_SEARCH_API_KEY;

export const searchConfig = {
  apiKey: SEARCH_API_KEY,
  locale: "en",
  endpoints: SandboxEndpoints // remove if using a production account
};

interface SearchExperienceProps {
  experienceKey: string;
  verticalKey?: string;
  children?: React.ReactNode;
}

const SearchExperience = ({
  experienceKey,
  verticalKey,
  children,
}: SearchExperienceProps) => {
  const search = provideHeadless({
    ...searchConfig,
    verticalKey,
    experienceKey,
  });

  return (
    <SearchHeadlessProvider searcher={search}>
      {children}
    </SearchHeadlessProvider>
  );
};

export default SearchExperience;

4:18 Add a new file blog-results.tsx to src/components. Insert the following code to get a quick search results page up:

// src/components/blog-results.tsx

import {
  SearchBar,
  StandardCard,
  VerticalResults,
} from "@yext/search-ui-react";
import { useSearchActions, useSearchState } from "@yext/search-headless-react";
import { ImSpinner3 } from "react-icons/im";
import * as React from "react";

const BlogResults = () => {
  return (
    <div className="centered-container pt-4">
      <SearchBar />
      <VerticalResults CardComponent={StandardCard} />
    </div>
  );
};

export default BlogResults;

5:00 In src/templates/home.tsx wrap the return value from the default export in a search experience.

// src/templates/home.tsx
...

const Home: Template<TemplateRenderProps> = ({
  document,
}: TemplateRenderProps) => {
  const { _site } = document;

  return (
    <SearchExperience experienceKey="blog-search" verticalKey="blogs"> // New Content 
      <HomeLayout
        GreetingContent={() => (
          <Greeting name="Aaron" role="Developer Evangelist @ Yext" />
        )}
        sections={[
          {
            title: "Home",
            Section: (
              <PersonalInfo
                twitter={_site.c_twitter}
                github={_site.c_github}
                devTo={_site.devTo}
                introduction={_site.c_introduction}
                home={_site.c_home}
                skills={_site.c_skills}
                interests={_site.c_interests}
              />
            ),
          },
          {
            title: "Blogs",
            Section: <BlogResults />, // Updated Content
          },
        ]}
      />
    </SearchExperience> // New Content 
  );
};

export default Home;

5:36 Make sure to update your imports to include BlogResults and the SearchExperience component.

5:40 Start dev server with npm run dev. In the local dev environment, go to the Home page and switch to the Blogs tab, where you’ll see a search bar. Enter a search and you’ll see search results!

<% elem.innerText %>