Environnement Node.js, TypeScript et Angular avec Dev Containers

Cet article liste les étapes nécessaires à l’installation simple et rapide d’un environnement de développement Node.js, TypeScript et Angular sans modifier le système local à l’aide des Dev Containers de VSCode.

Prérequis

Pour suivre ce guide, vous aurez besoin des éléments suivants :

• VSCode
• Docker Desktop
• WSL version 2
• Plugin Dev Containers installé dans VSCode

Ce guide est basé sur l’utilisation de Windows 11 avec WSL2, mais fonctionne également avec Windows 10.

Créer le conteneur

L’objectif de cet article est de créer les bases d’une application Angular pour mon projet Whisper ASR, un service web capable de convertir automatiquement des enregistrements audio en texte dans plusieurs langues. Dans cette partie seules les étapes nécessaires pour mettre en place un environnement de développement conteneurisé sont décrites.

Étape 1 : Créer le répertoire de travail

1. Créez un répertoire nommé /whisper-ws et ouvrez ce dossier dans VSCode.
2. Ouvrez la palette de commandes avec Ctrl + Shift + P et sélectionnez l’option « Dev Containers: Add Dev Container Configuration Files« .
3. Choisissez « Add configuration to Workspace« . Cette option permet de configurer un environnement de développement conteneurisé spécifique à l’espace de travail actuel dans Visual Studio Code.

Prompt ChatGPT : « Peux-tu m’expliquer simplement que fait l’option « Add configuration to Workspace » du plugin VsCode DevContainers ?

Étape 2 : Utiliser l’image Node.js & TypeScript

1. Choisissez l’image contenant Node.js et TypeScript. Utilisez la version 22 de Node, basée sur Debian 12 (Bookworm).
2. Installez Angular CLI par défaut avec le conteneur.

À la fin de ces étapes, un fichier .devcontainer.json devrait être créé :

Étape 3 : Construire et ouvrir le conteneur

1. Ouvrez la palette de commandes avec Ctrl + Shift + P et sélectionnez « Dev Containers: Rebuild and Reopen in Container« .
2. Surveillez le démarrage du conteneur et vérifiez les logs d’exécution.
3. A la fin de l’étape 2 ouvrez une console bash avec Ctrl + J.

Étape 4 : Initialiser le dépôt Git

1. Initialisez Git dans le répertoire principal du conteneur avec la commande git init.

et créez votre première application Angular :

ng new whisper-ws --skip-git

Je choisi de ne pas créer de fichier Git dans les projets Angular afin de centraliser la gestion des commits au niveau du répertoire principal. Ainsi, il est possible de créer plusieurs projets Angular dans le même conteneur tout en gérant Git de manière centralisée au niveau du dossier parent.

Étape 5 : Configurer Git dans le répertoire principal

Pour éviter les avertissements ou erreurs liés à la sécurité des répertoires, dans git, lancez la commande suivante :

git config --global --add safe.directory /workspace/whisper-ws

Étape 6 : Tester le conteneur

Modifiez le fichier package.json pour que la commande npm start écoute sur toutes les interfaces réseau du container.

"start": "ng serve --host 0.0.0.0 --poll 1000"

La commande ng serve --host 0.0.0.0 --poll 1000 lance un serveur de développement Angular avec les options suivantes :

• --host 0.0.0.0 : permet au serveur de développement d’être accessible depuis toutes les interfaces réseau, pas seulement localhost.
• --poll 1000 : configure le serveur pour vérifier les modifications des fichiers toutes les 1000 millisecondes (1 seconde), ce qui est utile pour les systèmes de fichiers qui ne prennent pas en charge les événements de changement de fichiers natifs.

Exécuter l’application

1. Démarrez l’application Angular avec npm start.
2. Si tout fonctionne correctement, votre navigateur devrait ouvrir l’URL http://localhost:4200.

Étape 7 :

Lors de votre prochaine ouverture de VSCode, vous serez invité à rouvrir le projet dans un conteneur. Vous pouvez le faire en utilisant l’option Reopen in container avec Ctrl + Shift + P.

Étape 8 : Renommer le container

Lister les container disponible dans un terminal wsl :

docker ps -a

Renommer un container pour lui donner un nom plus évocateur dans Docker Desktop :

docker rename ba34083486c9 Whisper_WS

Pourquoi utiliser la conteneurisation pour mes projets ?

1. Consistance de l’environnement : Docker assure que le même environnement est utilisé en développement, test et production, éliminant les problèmes spécifiques aux machines des développeurs.
2. Environnement isolé : Chaque projet peut avoir son propre environnement, sans interférence avec d’autres projets ou le système d’exploitation hôte.
3. Facilité d’onboarding : Les nouveaux développeurs peuvent cloner le dépôt, lancer les conteneurs Docker et commencer à travailler immédiatement.
4. Gestion simplifiée des dépendances et versions : Les versions des Frameworks, bibliothèques et autres dépendances sont encapsulées, évitant les conflits de versions.
5. Isolation et sécurité : Les projets sont isolés les uns des autres, réduisant les risques de conflits et augmentant la sécurité.
6. Maintenance et nettoyage facilités : Les environnements de développement peuvent être facilement nettoyés en supprimant les conteneurs et les images Docker.
7. Compatibilité multiplateforme : Les conteneurs Docker fonctionnent de manière identique sur différentes machines et systèmes d’exploitation.
8. Support pour outils et services de développement : Docker s’intègre bien avec de nombreux outils de développement, simplifiant la configuration des services nécessaires.
9. Expérimentation et test faciles : Les développeurs peuvent expérimenter avec de nouvelles technologies ou configurations dans des conteneurs isolés, sans risque pour leur environnement principal.

En résumé, utiliser les Dev Containers de VSCode pour configurer un environnement de développement est une méthode efficace pour garantir la cohérence et la simplicité de votre configuration. En suivant ce guide, vous avez pu créer un conteneur Node.js, TypeScript et Angular, gérer les dépendances, et lancer rapidement votre projet. Cette approche minimise les problèmes de compatibilité, facilite la collaboration et améliore l’expérience développeur. Pour approfondir vos connaissances, n’hésitez pas à consulter la documentation officielle des DevContainers, de passer à l’action et de tester par vous même ; )