Structure du Monorepo

Vue d'ensemble

ScaleRocket est un monorepo pnpm workspace propulsé par Turborepo. Il contient trois applications, quatre packages partagés et un projet Supabase -- le tout dans un seul dépôt.

Structure des répertoires

scalerocket/
├── apps/
│   ├── web/              # Next.js marketing site
│   ├── app/              # Vite + React dashboard (SPA)
│   └── ops/              # Vite + React admin panel
├── packages/
│   ├── ui/               # Shared component library
│   ├── config/           # Site config, pricing, constants
│   ├── types/            # TypeScript types (DB, API)
│   └── emails/           # Email templates + sending
├── supabase/
│   ├── functions/        # Edge Functions
│   ├── migrations/       # Database migrations
│   └── config.toml       # Supabase local config
├── turbo.json            # Turborepo pipeline config
├── pnpm-workspace.yaml   # Workspace definition
└── package.json          # Root scripts

apps/ -- Applications

apps/web -- Site Marketing

• Stack : Next.js (App Router)
• Objectif : Landing page, tarification, blog, pages SEO
• Port : http://localhost:3000
• Déployé sur : Vercel

apps/app -- Tableau de bord utilisateur

• Stack : Vite + React + React Router
• Objectif : Expérience utilisateur authentifié (tableau de bord, paramètres, facturation)
• Port : http://localhost:5173
• Déployé sur : Vercel

apps/ops -- Panneau d'administration

• Stack : Vite + React
• Objectif : Tableau de bord d'administration interne (utilisateurs, abonnements, blog)
• Port : http://localhost:5174
• Déployé sur : Vercel (accès restreint)

packages/ -- Code partagé

supabase/ -- Backend

• supabase/functions/ -- Edge Functions basées sur Deno
• supabase/migrations/ -- Fichiers de migration SQL
• supabase/config.toml -- Configuration de développement local

Configuration de Turborepo

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {
      "dependsOn": ["^build"]
    },
    "type-check": {
      "dependsOn": ["^build"]
    }
  }
}

Points clés :

• build dépend de ^build -- les packages sont construits avant les applications qui les utilisent.
• dev n'est pas mis en cache et s'exécute de manière persistante.
• Turborepo met en cache les résultats de build pour des reconstructions plus rapides.

pnpm Workspace

# pnpm-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"

Configuration .npmrc

Le fichier .npmrc à la racine contient :

shamefully-hoist=true

Ce paramètre est requis pour les workspaces pnpm avec des packages partagés. Par défaut, pnpm crée une structure node_modules stricte où chaque package ne voit que ses dépendances déclarées. Avec shamefully-hoist=true, les dépendances sont hissées vers le node_modules/ racine, ce qui est nécessaire car Vite résout les dépendances depuis le contexte de l'application et a besoin de packages hissés pour trouver les dépendances partagées des packages du workspace comme @saas/ui et @saas/config.

Sans ce paramètre, vous pourriez rencontrer des erreurs "module not found" lorsque les applications essaient d'utiliser des dépendances déclarées dans les packages partagés.

Commandes de développement

# Start everything (all apps + Supabase)
pnpm dev

# Start a specific app
pnpm --filter web dev        # Marketing site
pnpm --filter app dev        # User dashboard
pnpm --filter ops dev        # Admin panel

# Start Supabase locally
pnpm supabase start

# Start Edge Functions
pnpm supabase functions serve

Pipeline de build

# Build all apps and packages
pnpm build

# Build a specific app
pnpm --filter web build
pnpm --filter app build

# Type-check everything
pnpm type-check

# Lint everything
pnpm lint

Turborepo gère automatiquement le graphe de dépendances. Lorsque vous exécutez pnpm build, il :

1. Construit d'abord packages/types (pas de dépendances)
2. Construit packages/config et packages/ui (peuvent dépendre de types)
3. Construit packages/emails (dépend de ui pour les composants)
4. Construit les trois applications en parallèle (dépendent des packages)

Ajouter une nouvelle application

1. Créez le répertoire de l'application :

mkdir apps/my-app
cd apps/my-app
pnpm init

2. Ajoutez les dépendances du workspace :

pnpm --filter my-app add @saas/ui @saas/config @saas/types --workspace

3. L'application est automatiquement détectée par le pnpm workspace et Turborepo.

Ajouter un nouveau package

1. Créez le répertoire du package :

mkdir packages/my-package
cd packages/my-package
pnpm init

2. Définissez le nom du package dans package.json :

{
  "name": "@saas/my-package",
  "main": "./src/index.ts"
}

3. Utilisez-le dans n'importe quelle application :

pnpm --filter app add @saas/my-package --workspace