Commencer avec Nx pour la gestion de monorepo

La gestion de plusieurs projets liés peut rapidement devenir complexe. À mesure que votre base de code grandit, vous avez besoin d’outils qui aident à maintenir la cohérence, partager le code efficacement et optimiser les temps de build. Nx est une solution puissante conçue spécifiquement pour ces défis.

Ce guide vous montrera comment configurer et utiliser Nx pour gérer un monorepo efficacement. Vous apprendrez les concepts fondamentaux, créerez un espace de travail de base et comprendrez comment les fonctionnalités intelligentes de Nx peuvent considérablement améliorer votre flux de développement.

Qu’est-ce qu’un monorepo ?

Un monorepo est une stratégie de contrôle de version où plusieurs projets sont stockés dans un seul dépôt. Contrairement à avoir des dépôts séparés pour chaque projet (polyrepo), un monorepo contient tous les projets liés en un seul endroit.

Avantages des monorepos

• Partage de code - Réutiliser le code entre projets sans gestion complexe de packages
• Changements atomiques - Mettre à jour plusieurs projets en un seul commit
• Outillage cohérent - Appliquer les mêmes standards de développement à tous les projets
• Dépendances simplifiées - Gérer les relations entre projets en un seul endroit
• Releases coordonnées - Synchroniser les mises à jour entre projets interdépendants

Cependant, les monorepos introduisent des défis comme la gestion des dépendances de build et la montée en charge à mesure que votre base de code grandit. C’est là qu’intervient Nx.

Qu’est-ce que Nx ?

Nx est un système de build extensible conçu spécifiquement pour la gestion de monorepo. Développé initialement pour les applications Angular, Nx prend maintenant en charge plusieurs frameworks frontend et backend incluant React, Vue, Node.js, et plus encore.

Fonctionnalités clés de Nx

• Mise en cache intelligente - Évite de reconstruire le code inchangé
• Graphique de dépendances - Visualise les relations entre projets
• Commandes affected - Ne construit et teste que ce qui est impacté par vos changements
• Générateurs de code - Crée des structures de projet cohérentes
• Plugins extensibles - Prend en charge divers frameworks et outils

Configuration de votre premier espace de travail Nx

Créons un espace de travail Nx de base avec une application React et une bibliothèque partagée.

Prérequis

• Node.js (v14 ou plus récent)
• npm ou yarn

Création d’un espace de travail Nx

# Installer la CLI Nx globalement (optionnel)
npm install -g nx

# Créer un nouvel espace de travail
npx create-nx-workspace@latest my-workspace

Pendant la configuration, vous serez invité à choisir :

1. Quelle stack utiliser (sélectionnez “React”)
2. Nom de l’application (ex : “web-app”)
3. Format de style (CSS, SCSS, etc.)
4. Configuration Nx Cloud (optionnel mais recommandé pour les projets d’équipe)

Ceci crée un espace de travail avec la structure suivante :

my-workspace/
├── apps/
│   └── web-app/
├── libs/
├── nx.json
├── package.json
└── tsconfig.base.json

Comprendre la structure de l’espace de travail

• apps/ - Contient vos applications (frontend, backend, mobile)
• libs/ - Contient les bibliothèques de code partagé utilisées dans les applications
• nx.json - Configure le comportement et les plugins de Nx
• package.json - Gère les dépendances pour tout l’espace de travail

Ajouter des projets à votre espace de travail

Ajoutons maintenant une bibliothèque UI partagée et voyons comment Nx gère les dépendances.

Création d’une bibliothèque partagée

nx g @nx/react:lib ui-components

Ceci crée une bibliothèque dans libs/ui-components/ qui peut être importée par n’importe quelle application dans votre espace de travail.

Création d’un composant dans la bibliothèque

nx g @nx/react:component button --project=ui-components --export

Ceci génère un composant Button dans votre bibliothèque UI et l’exporte pour utilisation dans d’autres projets.

Utilisation de la bibliothèque dans votre application

Modifiez votre application pour utiliser le nouveau composant :

// apps/web-app/src/app/app.tsx
import { Button } from '@my-workspace/ui-components';

export function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button>Click me</Button>
    </div>
  );
}

Exécution de tâches avec Nx

Nx fournit une façon unifiée d’exécuter des tâches dans vos projets.

Commandes courantes

# Démarrer le serveur de développement
nx serve web-app

# Construire l'application
nx build web-app

# Exécuter les tests
nx test web-app

# Linter le code
nx lint web-app

Exécution de tâches pour tous les projets

nx run-many --target=build --all

Tirer parti des fonctionnalités intelligentes de Nx

La puissance de Nx devient évidente à mesure que votre espace de travail grandit. Explorons ses fonctionnalités les plus précieuses.

Visualisation des dépendances de projet

nx graph

Ceci ouvre une visualisation interactive de vos dépendances de projet, vous aidant à comprendre l’architecture de votre monorepo.

Comprendre les projets affectés

Quand vous apportez des changements, Nx peut déterminer quels projets sont affectés :

nx affected:graph

Ceci montre seulement les projets impactés par vos changements récents.

Construire seulement ce qui a changé

nx affected --target=build

Ceci construit seulement les projets affectés par vos changements, économisant un temps significatif dans les pipelines CI/CD.

Mise en cache pour la vitesse

Nx met automatiquement en cache les résultats des tâches. Si vous exécutez la même tâche avec les mêmes entrées, Nx utilise le résultat en cache au lieu de l’exécuter à nouveau :

# Première exécution (exécute la tâche)
nx build web-app

# Deuxième exécution (utilise le cache)
nx build web-app

Configuration de l’espace de travail Nx

Le fichier nx.json contrôle le comportement de Nx. Voici une configuration de base :

{
  "npmScope": "my-workspace",
  "affected": {
    "defaultBase": "main"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

Paramètres clés :

• npmScope - Le préfixe pour importer les bibliothèques
• affected.defaultBase - La branche git à comparer
• cacheableOperations - Les tâches qui doivent être mises en cache
• dependsOn - Les dépendances de tâches (ex : construire les bibliothèques avant les applications)

Exemple concret : Application full-stack

Créons un exemple plus complet avec un frontend React et un backend Node.js :

# Créer une app React
nx g @nx/react:app client

# Créer une API Node.js
nx g @nx/node:app api

# Créer une bibliothèque de types partagés
nx g @nx/js:lib shared-types

Ceci vous donne un espace de travail avec :

1. Une application client React
2. Un serveur API Node.js
3. Une bibliothèque partagée pour les types communs

Vous pouvez exécuter les deux applications simultanément :

nx run-many --target=serve --projects=api,client --parallel

Conclusion

Nx rend la gestion de monorepo simple et efficace. En gérant la complexité des dépendances de projet et l’optimisation des builds, il vous permet de vous concentrer sur l’écriture de code plutôt que sur la gestion de la structure de votre dépôt. Commencez avec une configuration simple comme montré dans ce guide, et étendez à mesure que votre projet grandit.

FAQ