Comment utiliser Nx Workspace pour créer des applications frontales

L’un des plus grands défis de la construction applications Web complètes c’est gérer la complexité. Si vous créez un produit, il comportera probablement plusieurs applications frontales qui communiquent avec une application backend qui partage des interfaces avec plusieurs membres de l’équipe qui doivent collaborer efficacement.

Dans cet article, nous explorerons Nx (Nrwl Extensions), une boîte à outils open source développée par l’équipe Nrwl (Nrwl.io), qui peut considérablement simplifier la façon dont vous organisez, testez et partagez du code entre plusieurs applications JavaScript.

L’outil lui-même est basé sur les meilleures pratiques développées par Google pour faire évoluer des milliers d’applications auprès de milliers de développeurs dans une seule application de style monorepo. Cependant, vous n’avez pas besoin d’opérer à l’échelle de Google pour constater les avantages de Nx. C’est un outil très puissant pour les projets de toutes tailles.

Pourquoi les grandes entreprises comme Google, Facebook et Microsoft aiment-elles gérer leur code dans des monorepos ou, en termes simples, utiliser un seul référentiel Git pour gérer plusieurs applications et bibliothèques ? La réponse est simple : cela les aide à gérer la complexité en appliquant les meilleures pratiques à l’échelle de l’organisation.

Cela offre cohérence et prévisibilité dans le code tout en maximisant la capacité de partager du code entre projets, mais vous ne pouvez pas simplement mettre tout votre code dans un seul dépôt et espérer en tirer des avantages. Le bon outil est en place pour tester, créer et déployer vos applications à grande échelle et c’est là que Nx entre en jeu. Nx offre de puissantes fonctionnalités pour créer et gérer de tels projets, notamment le partage de code, la gestion des dépendances, l’exécution de tâches et l’exécution de tests.

Comment Nx Workspace facilite-t-il les applications Monorepo ?

L’espace de travail Nx est spécialement conçu pour faciliter le développement et la gestion de style monorepo développement d’applications web. Il fournit plusieurs fonctionnalités et outils qui rendent le travail avec les monorepos plus efficace et productif.

Voici quelques-uns des principaux outils et fonctionnalités proposés par Nx Workspace :

1. Structure de l’espace de travail : Nx organise les projets au sein d’un monorepo de manière structurée. Il fournit des répertoires dédiés aux applications, aux bibliothèques et au code partagé. Cette structure favorise la réutilisation du code, la modularité et la maintenabilité.
2. Partage de Code: Nx simplifie le partage de code entre les projets au sein du monorepo. Il vous permet de créer des bibliothèques réutilisables qui peuvent être facilement importées et utilisées par plusieurs applications. Cela favorise la cohérence du code, réduit la duplication et garantit des mises à jour efficaces dans la base de code.
3. Collaboration inter-projets : Le fait de regrouper tous les projets dans un seul référentiel encourage la collaboration et le partage des connaissances entre les membres de l’équipe. Les développeurs peuvent facilement basculer entre les projets, créer frameworks multiplateformes changer et contribuer à plusieurs applications ou bibliothèques au sein du monorepo. Cela favorise la collaboration, réduit le changement de contexte et favorise des révisions de code et un transfert de connaissances efficaces.
4. Rationalisez la construction et le déploiement : Nx optimise le processus de construction pour les monorepos. Il utilise un cache de calcul pour déterminer quels projets doivent être reconstruits en fonction des modifications, ce qui permet des constructions plus rapides et plus efficaces. Cela évite les reconstructions inutiles et réduit les temps de cycle de développement. Nx fournit également une automatisation du déploiement et des scripts, vous permettant de déployer facilement plusieurs applications ou bibliothèques au sein du monorepo.
5. Tests et assurance qualité : Nx offre une prise en charge intégrée pour les tests et l’assurance qualité. Il fournit des outils et des utilitaires pour écrire et exécuter des tests sur plusieurs projets au sein du monorepo. Nx facilite la configuration et l’exécution des tests, garantissant l’intégrité du code et le maintien de normes de qualité élevées.
6. Évolutivité et maintenabilité : Monorepos offre des avantages en matière d’évolutivité et de maintenabilité à mesure que la base de code se développe. Avec un espace de travail Nx de style monorepo, vous pouvez facilement ajouter de nouveaux projets, refactoriser ceux existants et gérer l’intégralité de la base de code comme une unité cohérente.

Nx Workspace pour les applications frontales Monorepo en action

Voyons comment vous pouvez créer plusieurs applications frontales (Angular/React, etc.) dans un style monorepo à l’aide de l’espace de travail Nx.

Pour configurer un espace de travail Nx pour le dépôt mono, vous pouvez suivre ces étapes générales :

1. Assurez-vous que Node.js, npm (Node Package Manager) et Angular CLI sont installés sur votre système. Vous pouvez télécharger et installer node.js et npm à partir du site Web officiel de Node.js (https://nodejs.org) et pour Angular CLI, ouvrez votre interface de ligne de commande (CLI) et installez-la globalement en exécutant la commande suivante :

2. Dans votre répertoire préféré, exécutez la commande suivante pour créer un nouvel espace de travail Nx

Cette commande vous demandera de choisir un préréglage. Vous pouvez sélectionner le préréglage « vide » ou choisir parmi d’autres options en fonction de vos besoins.

3. Après avoir créé l’espace de travail, vous pouvez naviguer dans le répertoire nouvellement créé à l’aide de la commande :

Remplacer `` avec le nom que vous avez fourni lors de la création de l’espace de travail.

4. Générer Applications angulaires: Utilisez la commande Angular CLI pour générer l’application `` pour générer des applications angulaires dans votre espace de travail Nx. Par exemple, vous pouvez exécuter :

Cela créera un répertoire d’applications angulaires sous le dossier apps de votre espace de travail.

5. Générez des applications React : utilisez la commande Nx `npx nx g @nrwl/react:app ` pour générer des applications React dans votre espace de travail Nx. Par exemple, vous pouvez exécuter :

Cela créera un répertoire d’applications React sous le dossier apps de votre espace de travail.

6. Chaque application que vous générez aura son propre fichier de configuration situé dans `espace de travail/apps//`. Vous pouvez modifier ces fichiers de configuration pour personnaliser les paramètres de chaque application, tels que la spécification des points d’entrée, des répertoires de sortie et d’autres options de construction.

7. Pour créer toutes les applications de votre espace de travail Nx, vous pouvez utiliser la commande Nx `npx nx run-many –target=build –all`. Cette commande construira toutes les applications définies dans votre espace de travail, qu’il s’agisse d’applications Angular ou React.

8. Si vous souhaitez créer une application spécifique, vous pouvez fournir le nom de l’application comme argument de la commande build. Par exemple:

Cette commande construira l’application angulaire angulaire-app. De même, vous pouvez exécuter la commande build pour une application React comme ceci :

Cette commande construira l’application React-app

9. Une fois construits, vous pouvez servir les applications localement à des fins de développement ou de test. Utilisez la commande Nx `npx nx run :serve` pour démarrer un serveur de développement pour une application spécifique. Par exemple:

Cette commande démarrera un serveur de développement pour l’application angulaire angulaire-app. De même, vous pouvez servir l’application React :

Cette commande démarrera un serveur de développement pour l’application React React-app.

Conclusion

En suivant les étapes ci-dessus, vous pouvez créer plusieurs applications frontales dans votre espace de travail Nx. Nx fournit un flux de travail puissant et efficace pour gérer et créer des applications de style monorepo, vous permettant d’organiser, de développer et de déployer plusieurs projets simultanément, offrant à votre organisation un moyen prévisible de collaborer et d’automatiser des applications Web complexes à grande échelle.

Si vous souhaitez plus de conseils sur la façon de créer et de gérer des applications de style monorepo, contactez-nous à [email protected] pour une séance de consultation gratuite.