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
│   ├── functions/http
│   ├── templates
│   │   ├── location.tsx
│   │   └── static.tsx
│   ├── components
│   │   ├── header.tsx
│   │   ├── footer.tsx
│   │   └── etc...
├── config.yaml
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
└── README.md

config.yaml

All configuration for your site is defined in this file. Refer to the Site Configuration doc for more details.

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 in the Templates doc.

src/components

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

src/functions/http

HTTP serverless functions are located in the src/functions/http folder. See the HTTP Serverless Functions reference doc for more information.

Note that you can store other files relevant to your serverless function logic like types and utility functions within src/functions but they will not be served as HTTP functions unless they are located within the http folder.

vite.config.js

The local dev server and build toolchain are handled by Vite. The starters include 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.js

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

postcss.config.js

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.