Guide du monorepo rapide avec Nextjs, pnpm, workspaces et turbo

Introduction

Dans le dev moderne d'applications JavaScript, la gestion de multiples projets interconnectés peut rapidement devenir un défi.

Imaginez une entreprise avec plusieurs équipes travaillant sur différents produits qui partagent des composants communs comment organiser efficacement ce code ?

C'est là que les monorepos entrent en jeu.

Un monorepo (repository monolithique) est une stratégie de gestion de code où plusieurs projets sont stockés dans un seul dépôt Git.

Cette approche facilite le partage de code, la gestion des dépendances et la coordination des changements à travers différents projets.

Dans cet article, nous allons explorer comment mettre en place un monorepo efficace en utilisant pnpm workspaces, une solution élégante et performante pour gérer des projets JavaScript interconnectés.

Je pars du principe que vous avez déjà les projets back et front, donc on ne va pas repartir de 0.

Comprendre la problématique

Avant de plonger dans la mise en place technique, comprenons le problème que nous cherchons à résoudre.

Approche traditionnelle : Repo multiples

Traditionnellement, chaque projet dispose de son propre dépôt Git :

Repo Design System
Repo Frontend
Repo Backend

Cette approche présente plusieurs inconvénients :

• Cycle de développement lent : Lorsque vous modifiez une librairie partagée, vous devez la publier avant de pouvoir l'utiliser dans d'autres projets.
• Tâches transversales complexes : Effectuer des changements qui affectent plusieurs projets devient très laborieux.
• Gestion de versions difficile : Maintenir la cohérence des versions entre projets interdépendants est un défi.

Solution : L'approche monorepo

Avec un monorepo, tous vos projets vivent dans un repo Git unique:

Monorepo
├── packages
│   ├── design-system
│   ├── frontend
│   └── backend

Les avantages sont nombreux :

• Développement simplifié : Modifiez n'importe quelle partie du code et testez immédiatement l'impact sur les autres projets.
• Tâches transversales facilitées : Les changements qui touchent plusieurs projets peuvent être effectués en une seule PR.
• Partage de code direct : Pas besoin de publier des packages pour partager du code.
• Visibilité globale : Tous les développeurs ont une vue d'ensemble du système.

Mise en place d'un monorepo avec pnpm

Nous allons créer un monorepo qui contient :

• Un frontend Next.js 15
• Un backend Strapi 5

Pourquoi pnpm ?

pnpm est un gestionnaire de paquets alternatif à npm et yarn qui offre :

• Un stockage plus efficace des node_modules (économie d'espace disque)
• Des performances supérieures
• Un excellent support des workspaces pour les monorepos

Pour installer pnpm:

npm i -g pnpm

pnpm setup 

# et enfin sourcez ce qu'il vous donne comme ligne pour charger pnpm dans le bash

1. Structure de base du monorepo

Commençons par créer notre structure de répertoires :

mkdir monorepo-demo
cd monorepo-demo

Initialisons notre projet à la racine :

pnpm init

Créons maintenant le fichier de configuration des workspaces. À la racine du projet, créez un fichier pnpm-workspace.yaml :

packages:
  - "packages/apps/*" # Dossier pour nos repo back/front
  - "packages/shared/*" # Ici on pourra mettre autre chose comme le design system, les types etc

Créons les dossiers correspondants :

mkdir -p packages/apps packages/shared

2. Cloner les projets dans les packages

Ici, on peut commencer à cloner nos projets front et back dans les packages/apps respectives, faisons simple:

• on clone dans frontend, le projet front Next.js
• on clone dans backend, le projet back Strapi

Une fois cette étape terminée, il est important de revoir le package.json de ces projets de manière à les tagger.

On remplace juste les premières lignes des package.json pour Next.js par ceci:

{
  "name": "@monorepo/frontend",
  "version": "0.1.0",
  ...  
}

On fait la même chose pour Strapi:

{
  "name": "@monorepo/backend",
  "version": "0.1.0",
  ...  
}

3. Installation de Turbo

Comme son nom l'indique, Turbo est un package qui sert à accélérer. Mais quoi ?

Il accélère les build. Il ne sert qu'à ça mais c'est déjà beaucoup, en sachant qu'il peut y avoir des problèmes de compatibilité pnpm et Next.js turbopack, je vous conseil d'utiliser Turbo également côté pnpm.

Pour ce faire, dans un terminal à la racine:

pnpm add turbo

Et dans un fichier turbo.json à la racine:

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

4. Le package.json global

Maintenant nous allons nous occuper de notre package.json à la racine du projet:

{
  "name": "mon-monorepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build",
    "start": "turbo run start",
    "lint": "turbo run lint"
  },
  "devDependencies": {
    "turbo": "^1.10.16"
  },
  "packageManager": "pnpm@10.5.0"
}

5. Lancement

On peut maintenant lancer nos projets avec:

# Que le back en mode dev
pnpm --filter @monorepo/backend dev

# Que le front en mode dev
pnpm --filter @monorepo/frontend dev

# Les deux en mode dev
pnpm --parallel dev

Vous comprenez le principe ? On peut retrouver les sous projets grâce aux tags, il est donc facile de savoir quoi faire avec build et start.

Conclusion

Les monorepos avec pnpm workspaces offrent une approche puissante pour gérer des projets JavaScript interconnectés. Bien que cette approche puisse sembler complexe au premier abord, les avantages en termes de développement, de partage de code et de maintenabilité sont considérables.

Cette architecture est particulièrement adaptée aux équipes qui travaillent sur plusieurs projets partageant du code commun. Elle permet une collaboration plus fluide, des cycles de développement plus rapides et une meilleure cohérence technique.

Si vous débutez avec les monorepos, commencez par une structure simple comme celle présentée dans cet article, vous pouvez revoir la méthode en fonction de l'évolution de votre projet.

N'hésitez pas à adapter cette structure à vos besoins spécifiques - c'est toute la beauté des monorepos : ils sont flexibles et peuvent s'adapter à presque n'importe quel type de projet!

Ressources complémentaires

• Documentation officielle de pnpm
• Guide des workspaces avec pnpm
• Nx - Outil avancé pour monorepos
• Turborepo - Outil de build pour monorepos
• Lerna - Outil historique de gestion de monorepos