Installation

Install SiteX and add the Vite and TypeScript configuration.

AI Agent Install

Give your agent this instruction from inside the project you want to set up:

Read https://sitex.full.dev/docs/installation and install SiteX in this project.

Follow the manual install steps on that page: install the package, add the Vite plugin,
extend the SiteX TypeScript config, and create the first page.

Manual Install

Install SiteX, React, Vite+, and the Vite packages your app needs.

pnpm add @fulldotdev/sitex react react-dom vite vite-plus @vitejs/plugin-react
pnpm add -D typescript @types/react @types/react-dom

Vite Config

Add the SiteX plugin to vite.config.ts. Set appType to custom so Vite does not expect a normal single-page app fallback.

import { defineConfig } from "vite-plus"
import { sitex } from "@fulldotdev/sitex/plugin"
import react from "@vitejs/plugin-react"

export default defineConfig({
  appType: "custom",
  plugins: [react(), sitex()],
})

SiteX writes slashless URLs by default. Pass sitex({ trailingSlash: true }) if you want directory index output and trailing-slash paths.

TypeScript Config

Extend the SiteX TypeScript config so JSX client directives like client:load, client:only, client:visible, client:idle, and client:media are accepted.

{
  "extends": "@fulldotdev/sitex/tsconfig",
  "include": [
    "src/**/*",
    ".sitex/**/*.d.ts",
    ".sitex/typecheck/**/*.tsx",
    "vite.config.ts"
  ],
  "exclude": ["dist"],
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

First Page

Create src/pages/index.tsx.

export default function HomePage() {
  return (
    <html lang="en">
      <head>
        <title>My SiteX site</title>
        <meta name="description" content="My first SiteX page." />
      </head>
      <body>
        <h1>Hello from SiteX</h1>
      </body>
    </html>
  )
}

src/pages/index.tsx becomes /. Read Routing for file-to-URL behavior, or MDX pages for prose pages with src/layouts.

Build Behavior

SiteX runs through Vite+.

vp dev
vp build
vp preview

vp dev starts the development server. vp build writes one HTML file per static route, includes production CSS, and adds the island client script only when a page needs client rendering. vp preview serves the built output locally.

Next Steps

  1. Read Routing for the route types.
  2. Read TSX pages for static, dynamic, and server routes.
  3. Read MDX pages for prose pages with layouts.
  4. Read Pages API for indexes, cards, and navigation from route metadata.
  5. Read Component rendering for browser interactivity.
  6. Read Deployment before deploying server routes.