Developper des applications Full Stack avec Angular CLI et Nx Workspace

Découvrez comment organiser l’architecture complète d’un projet utilisant Angular en Front et Node JS en Backend avec un outil qui est maintenant de plus en plus répandu en entreprise. Il s’agit de Nx de Nrwl. L’extension pour booster les capacités d’Angular CLI et permettre une organisation de projet full stack digne d’une machine de guerre.

La galère des projets Full Stack Frontend / Backend

Vous avez certainement déjà eu le cas de figure ou vous devez sans arrêt jongler entre votre projet Front et Backend tout en buildant vos librairie à la volée pour les intégré à vos projet. On est tous passé par là un jour…

La gestion de projet en entreprise peut parfois s’avérer être une discipline digne des meilleures jongleurs du cirque du soleil. Et cela peut vraiment devenir un vrais casse tête quant il s’agit d’ajouter une couche de DevOps pour automatiser les opération de déploiement continu des divers services et librairies de votre projet.

De quoi ne pas dormir la nuit et devenir fou!!

Heureusement vous n’êtes pas le seul dans cette situation. Une équipe à mis au point une extension pour Angular CLI qui permet de remédier à presque tous les soucis que vous avez eux jusqu’as présent.

Nx: le sauveur de l’organisation de projet

Comme vous allez pouvoir le constater, Nrwl propose un redoutable outils Nx qui n’est rien d’autre qu’une extension pour Angular CLI. Cela permet de ne pas s’éloigner des patterns de développement du framework.

Cette extension va ajouter des fonctionnalités à votre projet en créant et organisant un veritable espace de travail pour contenir tous les elements dont vous aurez besoin pour developper convenablement votre projet:

• Application Frontend avec Angular
• Application Backend avec Node JS
• Repertoire pour la gestion des librairies
• Environnement de testing e2e
• Scripts dev et build
• Outils Analyzing & Visualizing de l’espace de travail

Avec tous cela vous n’avez plus à vous plaindre! Nx repense l’organisation de votre espace de travail pour installer tous ces elements dans un seul dossier de travail. Cela va énormément faciliter votre travail et le gestion du versioning de votre projet.

Voyons comment cela fonctionne et comment utiliser l’extension Nx.

Installer Nx et créer un espace de travail

L’installation de Nx est très facile, vous n’avez qu’a lancer une commande dans votre terminal pour démarrer un nouveau projet. Rien de plus facile.

$ npx create-nx-workspace@latest myworkspace

Patientez le temps du téléchargement puis vous êtes inviter à choisire l’une des options qui suivent.

Choisissez donc angular-nest pour installer la totalité des outil Nx.

Et vous remarquerez au passage que Nx est aussi compatible avec le framework React. Nous verrons dans un autre article ce que cela permet d’envisager.

Vous serez ensuit invité à nommer votre application et choisir un moteur de style (CSS, SCSSS) avant de lancer le téléchargement des packages du projet.

Une fois le téléchargement de tous le packages Node terminé, vous pouvez contempler le résultat en parcourant l’espace de travail créer par Nx.

<workspace name>/
├── apps/
│   ├── api
│   │   ├── src
│   │   │   ├── app
│   │   │   │   ├── app.controller.ts
│   │   │   │   ├── app.controller.spec.ts
│   │   │   │   ├── app.module.ts
│   │   │   │   ├── app.service.ts
│   │   │   │   └── app.service.spec.ts
│   │   │   ├── assets
│   │   │   ├── environments
│   │   │   │   ├── environment.ts
│   │   │   │   └── environment.prod.ts
│   │   │   └── main.ts
│   │   ├── jest.conf.js
│   │   ├── proxy.conf.json
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
│   │── todos/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   ├── assets/
│   │   │   ├── environments/
│   │   │   ├── favicon.ico
│   │   │   ├── index.html
│   │   │   ├── main.ts
│   │   │   ├── polyfills.ts
│   │   │   ├── styles.scss
│   │   │   └── test.ts
│   │   ├── browserslist
│   │   ├── jest.config.js
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
│   └── todos-e2e/
│       ├── src/
│       │   ├── fixtures/
│       │   │   └── example.json
│       │   ├── integration/
│       │   │   └── app.spec.ts
│       │   ├── plugins/
│       │   │   └── index.ts
│       │   └── support/
│       │       ├── app.po.ts
│       │       ├── commands.ts
│       │       └── index.ts
│       ├── cypress.json
│       ├── tsconfig.e2e.json
│       ├── tsconfig.json
│       └── tslint.json
├── libs/
├── tools/
├── README.md
├── angular.json
├── nx.json
├── package.json
├── tsconfig.json
└── tslint.json

Maintenant je vous laisse contempler l’espace de travail et les projet de base installé. Vous pouvez facilement les démarrer avec les commandes habituel d’Angular:

# Pour démarrer le backend
$ ng serve api

et dans une autre fenêtre du terminal:

# Pour démarrer le frontend
$ ng serve todos

Ouvrez ensuite votre navigateur et rendez-vous sur les adresse suivantes:

http://localhost:4200
http://localhost:3333

Pas mal non?

Nx met en place tout un environnement prêt à l’utilisation avec même une librairie d’interface partagée entre le front et le back et une série de script pour manager les changements de notre espace de travail. Incroyable non?

Ceci nous permet de mettre en place une automatisation des processus de déploiement et de mise en production continue de vos applications… Je dis vos applications car Nx permet de gérer de multiple application au sein du même espace de travail et donc du même repository. C’est ce qui à été mis en place dans le dossier ./apps de votre espace de travail avec l’application Backend (api); Frontend (Todos) et 2e2. (Todos-e2e).

Je vous présenterai dans un prochain article comment organiser votre code et hiérarchiser les composents et modules de votre application conçu avec un espace de travail Nr.

En attendant si vous avez besoin de support pour votre projet, je vous invite vous rendre sur le lien suivant pour définir ensemble une solution de support qui vous convienne.