Development Environment Setup | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will:

• Set up a Yext Pages project
• Install Search UI React

Prerequisites

Check out the list of development dependencies for what you need to get started.

1. Create Your Project

Search UI React is compatible with Yext Pages , Vite, Create React App, Next.js , and more.

This tutorial will be built on Yext Pages. Before you get started, be sure that you have the latest version of the Yext CLI installed and a blank playground account.

Log in to your sandbox account with the Yext CLI:

yext init -u sandbox [YOUR_PLAYGROUND_ACCOUNT_ID]

In your terminal, run the following command:

yext pages new

You will then be walked through a series of prompts. To follow along with this project, respond to the prompts with the following:

1. Would you like to create a new repo or link and existing GitHub repo? Create a new repo
2. Which starter repository would you like to use? Search UI React Track Starter
3. What would you like to call your new Pages repo? tt-job-search
4. Would you like to setup a remote GitHub repository for tt-job-search? Y or enter
   • This will set up a remote repo and make deploying your site really easy.
   • If you are not logged into GitHub, the command will prompt you to log in. Follow the instructions through the browser and return to the command line when finished. If you are already logged in, just continue with enter.
5. Would you like to install dependencies for tt-job-search? Y or enter
   • This runs npm i under the hood and install all the required dependencies.
6. Would you like to populate your Content with seed data? (Recommended if you are starting with a fresh account) Y
   • Be careful when adding seed data to an account with existing data as it may update or delete existing data.
7. Warning: Are you sure you want to overwrite configuration resources for the current configuration? Yes
   • Confirm you are connected to the correct account.

2. Install the Library with a Package Manager

Navigate to your new project in the terminal:

cd tt-job-searcher

Install the Search UI React by running the following command:

npm install @yext/search-ui-react @yext/search-headless-react

3. Configure Tailwind CSS

Configure Content Paths

The Search React UI components work best with  Tailwind CSS . Tailwind has already been installed and configured in the project that you just cloned. However, you still need to add the path to where Search UI React lives within node_modules to tailwind.config.js . This will apply Tailwind CSS to the Search UI components.

Replace the contents of tailwind.config.cjs by copy and pasting the code below.

// tailwind.config.cjs

// The following import is the path to where the component source code lives
const { ComponentsContentPath } = require("@yext/search-ui-react");

module.exports = {
  content: [
    "./src/**/*.{ts,tsx}",
    "./lib/**/*.{js,jsx}",
    // tailwind is applied to the components by adding the component path here
    ComponentsContentPath,
  ],
  theme: {
    // the default theme is extended with custom styling used by the components
    extend: {
      colors: {
        primary: "var(--primary-color, #2563eb)",
        "primary-light": "var(--primary-color-light, #dbeafe)",
        "primary-dark": "var(--primary-color-dark, #1e40af)",
        neutral: "var(--neutral-color, #4b5563)",
        "neutral-light": "var(--neutral-color-light, #9ca3af)",
        "neutral-dark": "var(--neutral-color-dark, #1f2937)",
      },
      borderRadius: {
        cta: "var(--cta-border-radius, 1rem)",
      },
      keyframes: {
        rotate: {
          "100%": { transform: "rotate(360deg)" },
        },
        dash: {
          "0%": { transform: "rotate(0deg)", "stroke-dashoffset": 204 },
          "50%": { transform: "rotate(45deg)", "stroke-dashoffset": 52 },
          "100%": { transform: "rotate(360deg)", "stroke-dashoffset": 204 },
        },
      },
    },
  },
  plugins: [
    require("@tailwindcss/forms")({
      strategy: "class",
    }),
  ],
};