Repo Structure| 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.

light bulb
Tip
This directory must NOT contain any subdirectories.

You can learn more about templates here.

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.

sites-config/serving.json

The serving.json file can be used to configure a reverse proxy setup.

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 here.

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. You can learn more in the styling section here.

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. You can learn more in the styling section here.

package.json

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