Ssr Tanstack Strapi

• CMS: Strapi 5.x (headless)
• Database: PostgreSQL (recommended for production)
• API: REST with auto-generated endpoints

Monorepo

• Package Manager: pnpm with workspaces
• Structure: frontend/ + backend/ in single repo

Project Structure

my-app/
├── frontend/                    # TanStack Start application
│   ├── src/
│   │   ├── routes/              # File-based routing
│   │   │   ├── __root.tsx       # Root layout
│   │   │   ├── index.tsx        # Home page
│   │   │   └── posts/
│   │   │       ├── index.tsx    # List page
│   │   │       └── $slug.tsx    # Detail page
│   │   ├── hooks/               # TanStack Query hooks
│   │   ├── lib/
│   │   │   └── strapiClient.ts  # API client
│   │   ├── types/
│   │   │   └── strapi.ts        # TypeScript types
│   │   └── components/          # UI components
│   ├── app.config.ts            # TanStack Start config
│   └── package.json
├── backend/                     # Strapi application
│   └── src/api/                 # Content types
└── pnpm-workspace.yaml

Quick Start

Before starting, ask the user:

"Do you want to install the project in the current directory? (yes/no)"

• If YES: Create frontend/ and backend/ directly in the current directory
• If NO: Create a new project directory first, then create frontend/ and backend/ inside it

1. Initialize Monorepo

If installing in current directory:

# Create pnpm workspace in current directory
cat > pnpm-workspace.yaml << 'EOF'