Repo Structure | Yext Hitchhikers Platform

This page will walk through the structure of a basic PagesJS project. Most repos will look similar to this but won’t always be exactly the same.

.
├── src
│   ├── templates
│   │   ├── location.tsx
│   │   └── static.tsx
│   ├── components
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── etc...
├── sites-config
│   ├── ci.json   <-- required
│   ├── serving.json
│   ├── site-stream.json
│   ├── auth.json
│   ├── redirects.csv
│   └── features.json  <-- Autogenerated - do not edit
├── package.json
├── postcss.config.cjs
├── tailwind.config.js
├── vite.config.js
└── README.md

`src/templates`

This folder contains all of the templates that will render your site. All templates need to be placed in this specific folder, but no directories should be included under templates.

Note

This directory must not contain any subdirectories.

You can learn more about templates in this reference doc .

`src/components`

By convention, we recommend using a components folder to store any shared components that are used across templates. This folder could be named anything you want and there is nothing special about this folder name.

`sites-config/ci.json`

The ci.json file configures the CI (continuous integration) system for Yext Pages. The build process is defined in this configuration file. For most sites, you will not need to edit this configuration but for more advanced build processes, this is the place to go. You can learn more here .

`sites-config/serving.json`

The serving.json file can be used to configure a reverse proxy setup. You can learn more about reverse proxies here .

`sites-config/site-stream.json`

Use this file to define a stream for global data that can be used by any template. Learn more about global data .

`sites-config/auth.json`

Use this file to define the authentication schema for the site.

`sites-config/redirects.csv`

An optional redirects file. Learn more about Redirects .

`sites-config/features.json`

The features.json file is an auto-generated file that determines the structure and configuration of the site. It is generated after running yext pages generate. You should not edit this file.

`vite.config.js`

The local dev server and build toolchain are handled by Vite . The starter includes a vite config file that looks like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import yextSSG from "@yext/pages/vite-plugin";

export default defineConfig({
  plugins: [react(), yextSSG()],
});

It uses two plugins, React and the Yext build plugin.

`tailwind.config.cjs`

The basic starter uses Tailwind by default. This is the tailwind configuration file. Learn more about styling .

`postcss.config.cjs`

The starter repo uses postcss to pre-process the css. This is configured by default to work with tailwind and autoprefixer but can be updated to fit any css pipeline. Learn more about styling .

`package.json`

This file records all the dependencies included in the starter repo.

Back

< Super Quick Start

Templates >

Feedback

<% elem.innerText %>