Aller au contenu

Monorepo & NX

C'est quoi un monorepo ?

Explication simple : Un monorepo, c'est comme une grande boîte où l'on range tous les projets ensemble. Au lieu d'avoir 3 dossiers séparés sur votre ordinateur (un pour group, un pour tech, un pour immo), tout est au même endroit. C'est plus facile à gérer et à synchroniser.

Polyrepo vs Monorepo — comparaison

graph TB
    subgraph polyrepo["❌ Polyrepo (3 dépôts séparés)"]
        R1[repo: drwh_group]
        R2[repo: drwh_tech]
        R3[repo: drwh_immo]
    end

    subgraph monorepo["✅ Monorepo (drwh_front)"]
        M[drwh_front/\ndrwh_group\ndrwh_tech\ndrwh_immo]
    end

    style polyrepo fill:#ffebee,stroke:#e74c3c
    style monorepo fill:#e8f5e9,stroke:#27ae60
    style R1 fill:#e74c3c,color:#fff
    style R2 fill:#e74c3c,color:#fff
    style R3 fill:#e74c3c,color:#fff
    style M fill:#27ae60,color:#fff
Critère Polyrepo Monorepo (drwh_front)
Gestion des versions Chaque repo a sa propre version Version unifiée pour tous les services
Partage de code Complexe (packages npm privés…) Facile (import direct depuis lib partagée)
Refactoring Pénible (modifier 3 repos) Simple (un seul endroit)
CI/CD Pipeline séparé par repo Un seul pipeline, build intelligent
Découverte du code Chercher dans 3 repos Tout dans un seul dossier

Structure du monorepo drwh_front

drwh_front/                          ← Racine du monorepo
│
├── apps/                            ← Les applications
│   ├── drwh_group/                  ← Site Group (Laravel/PHP)
│   ├── drwh_tech/                   ← Site Tech (Next.js)
│   ├── drwh_tech-e2e/               ← Tests end-to-end de drwh_tech
│   ├── drwh_immo/                   ← Site Immo (Next.js)
│   └── drwh_immo-e2e/               ← Tests end-to-end de drwh_immo
│
├── docs/                            ← Cette documentation (MkDocs)
│
├── infra/                           ← Infrastructure
│   └── nginx/                       ← Configuration Nginx
│       ├── nginx.conf
│       ├── conf.d/
│       ├── certs/                   ← Certificats TLS
│       └── www/                     ← Webroot ACME
│
├── scripts/                         ← Scripts utilitaires
│   └── vercel-build.js              ← Build Vercel
│
├── nx.json                          ← Configuration NX
├── package.json                     ← Dépendances JS globales (racine)
├── tsconfig.base.json               ← TypeScript partagé
├── docker-compose.yml               ← Orchestration Docker
├── Dockerfile.tech                  ← Image Docker drwh_tech
├── Dockerfile.immo                  ← Image Docker drwh_immo
└── Dockerfile.group                 ← Image Docker drwh_group

NX : le chef d'orchestre

Explication simple : NX, c'est comme un chef d'orchestre dans un concert. Les musiciens (les services) jouent chacun leur partition, mais c'est le chef qui dit "maintenant vous démarrez", "maintenant vous vous arrêtez", "maintenant vous passez en production".

graph TD
    NX[🎼 NX\nChef d'orchestre] -->|nx run drwh_tech:serve| T[💻 drwh_tech]
    NX -->|nx run drwh_immo:build| I[🏗️ drwh_immo]
    NX -->|nx run drwh_group:serve| G[🏠 drwh_group]
    NX -->|nx affected --target=test| Tests[🧪 Tests intelligents\nSeulement ce qui a changé]
    NX -->|nx graph| Graph[📊 Graphe des dépendances\nentre projets]
    style NX fill:#0066FF,color:#fff,stroke:#004E89
    style T fill:#27ae60,color:#fff
    style I fill:#f39c12,color:#fff
    style G fill:#e74c3c,color:#fff
    style Tests fill:#8e44ad,color:#fff
    style Graph fill:#2d2e2e,color:#fff

Ce que NX permet de faire

Fonctionnalité Description Commande exemple
Servir Lancer un service en mode développement npx nx serve drwh_tech
Builder Compiler pour la production npx nx build drwh_immo
Tester Lancer les tests unitaires npx nx test drwh_tech
Linter Vérifier la qualité du code npx nx lint drwh_immo
Cache intelligent Ne refait que ce qui a changé Automatique
Graphe Visualiser les dépendances npx nx graph
Build affecté Build uniquement les projets impactés npx nx affected --target=build

Le fichier nx.json

C'est le fichier de configuration principal de NX, situé à la racine du monorepo.

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "defaultBase": "main",
  "targetDefaults": {
    "build": {
      "cache": true,
      "dependsOn": ["^build"]
    },
    "test": {
      "cache": true
    }
  }
}

Le cache NX

NX garde en cache les résultats des builds et tests. Si vous n'avez rien modifié dans un service, NX ne le rebuild pas — il utilise le cache. Cela accélère considérablement les déploiements.

Pour vider le cache : `npx nx reset`

Le fichier project.json

Chaque service a son propre fichier project.json qui décrit comment NX doit le gérer.

Exemple pour drwh_tech :

{
  "name": "drwh_tech",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/drwh_tech/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nx/next:build",
      "options": {
        "outputPath": "dist/apps/drwh_tech"
      }
    },
    "serve": {
      "executor": "@nx/next:server",
      "options": {
        "buildTarget": "drwh_tech:build",
        "port": 4201
      }
    }
  }
}

Commandes NX essentielles

````bash # Lancer tous les services npm run dev

# Lancer un service spécifique
npx nx serve drwh_tech
npx nx serve drwh_immo

# Lancer drwh_group (Laravel, via npm script)
npm run dev:group
```

```bash # Builder tous les services npm run build

# Builder un seul service
npx nx build drwh_tech
npx nx build drwh_immo

# Builder seulement les services affectés par les changements
npx nx affected --target=build
```

```bash # Tous les tests npm run test

# Tests d'un service
npx nx test drwh_tech

# Tests end-to-end
npx nx e2e drwh_tech-e2e
```

```bash # Vider le cache NX (si comportement bizarre) npx nx reset

# Voir le graphe des dépendances (ouvre dans le navigateur)
npx nx graph

# Lister tous les projets du workspace
npx nx show projects
```

Liens complémentaires