Back
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 newWhen prompted, select Create a new repo, and select the Search UI React Track Starter. Call your new repo tt-job-search. It is recomended to set up a remote repository for your new repo as this will allow you to easily deploy your new project later on.
Be sure to select yes when prompted to install dependencies and whether or not to populate your Content with seed data.
2. Install the Library with a Package Manager
Navigate to your new project in the terminal:
cd tt-job-searcherInstall the Search UI React by running the following command:
npm install @yext/search-ui-react @yext/search-headless-react3. 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",
}),
],
};
Daily Quiz Streak: 0
Quiz Accuracy Streak: 0
Question 1 of 2
Which CSS framework are you using with the Search UI React components?
Question 2 of 2
Which of the following commands will install Search UI React?
You're a star! ⭐
