IDE en tant que code avec les espaces de code GitHub dans Visual Studio Code

L'une des choses les plus difficiles pour les développeurs est de démarrer un projet déjà en cours.

Il arrive souvent que les exigences d'un nouveau projet nous obligent à modifier les versions des SDK et les outils que nous avons installés localement pour déboguer l'environnement, ce qui nous fait perdre des jours jusqu'à ce que tout fonctionne comme prévu.

Si l'on considère les versions qui sont en phase de bêta ou de prévisualisation, les choses se compliquent encore plus. Pour éviter que cela ne se produise, je voudrais vous présenter GitHub Codespaces, qui vous permet non seulement de générer l'environnement de développement dont votre application a besoin dans un conteneur, mais permet également de développer n'importe où et depuis n'importe quel appareil.

Commençons!

Qu'est-ce que les espaces de code GitHub ?

Les espaces de code Github sont un environnement cloud accessible depuis un navigateur et disposant de toutes les fonctionnalités nécessaires au développement de code dédié.

Vous avez peut-être vu l'annonce de GitHub, chaque fois que vous êtes dans un dépôt et que vous appuyez sur le point "clé". Un éditeur Web s'ouvrira avec le référentiel en question.

Cependant, vous ne pourrez pas exécuter le terminal car il s'agit simplement d'un éditeur Web et il n'y a pas de machine principale. Parfois, cela peut être plus que suffisant, mais imaginez que vous ayez besoin d'exécuter un environnement ou de compiler un projet mais que vous n'ayez pas un système répondant aux besoins (un iPad, une Surface Go, etc.) à portée de main.

GitHub Codespaces résout ce problème en vous permettant d'exécuter l'IDE dans le cloud pour qu'il fonctionne comme si vous utilisiez un système local et cela aussi avec votre configuration spécifiée.

Remarque : Cette fonctionnalité n'est disponible que sur les comptes d'équipe et d'entreprise.

Exemple de code

Pour cet exemple, je vais utiliser une application Node.js très simple :

 const express = require('express'); const app = express(); const port = 8080; app.use(express.static('public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); })

Le code ci-dessus a la structure suivante :

Vous pouvez lancer ce projet localement sans problème, à condition d'avoir installé Node.js, git et les extensions VS Code utiles pour un projet dans ce langage. Vous pouvez également utiliser des outils comme Nodemon, qui actualiseront automatiquement l'application.

Le problème survient lorsque vous travaillez non seulement avec cette configuration, mais que vous en utilisez de nombreuses autres, telles que le développement avec .NET Core, Python, Docker ou Kubernetes, ce qui vous oblige à installer plus d'outils et d'extensions dont vous n'avez pas toujours besoin, et ils peut finir par nuire aux performances de votre environnement de développement.

Le problème ne se limite pas à votre propre performance. Si quelqu'un d'autre rejoint l'équipe et a besoin de préparer son système avec les outils et les frameworks nécessaires au démarrage de l'application, il perdra également plusieurs heures, ce qui nuira aux performances globales de l'équipe (cela sera pire si vous êtes travailler avec différents systèmes d'exploitation).

Travailler avec des conteneurs distants

Visual Studio Code propose une extension appelée Remote Containers ou Dev Containers, qui vous permet de générer l'environnement de développement dont votre application a besoin dans un conteneur. De cette façon, tous les développeurs de votre équipe qui travaillent sur un projet auront automatiquement le même environnement de développement.

Cela rendra l'expérience de démarrage de votre projet aussi agile que possible et aussi si vous êtes celui qui a défini l'environnement, vous pouvez séparer plusieurs environnements de travail par projet avec différentes configurations sur la même machine. Cool hein?

Comment puis-je commencer?

Pour utiliser cette fonctionnalité, Docker doit être installé sur votre ordinateur car les conteneurs s'exécuteront dessus. Il est également nécessaire d'installer l'extension Remote Containers, qui nous aidera à construire l'environnement de développement.

La première chose que vous devez faire est de créer un dossier appelé .devcontainer dans le répertoire racine. C'est celui que l'extension va tenter d'identifier afin de savoir si elle a une configuration pour monter un conteneur avec les indications qu'il contient.

Dans celui-ci, vous devez avoir au moins un fichier appelé devcontainer.json qui est celui qui aura la configuration de l'environnement.

Pour cet exemple, j'ai utilisé ce qui suit :

 { "name": "dev-demo", "dockerFile": "Dockerfile", "forwardPorts": [ 8080 ], "settings": { "workbench.colorTheme": "Visual Studio Light" }, "containerEnv": { "NODE_ENV": "development", }, "extensions": [ "coenraads.bracket-pair-colorizer-2", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "formulahendry.auto-close-tag", "mikestead.dotenv", "christian-kohler.path-intellisense", "davidanson.vscode-markdownlint", "pkief.material-icon-theme", "humao.rest-client" ], "postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh", "postAttachCommand": "nodemon server.js" }

Comme vous pouvez le voir, il s'agit d'un JSON avec différentes sections :

• name : c'est le nom qu'aura le conteneur dev. Idéalement, il devrait s'agir d'un nom descriptif.
• dockerFile : il sert à indiquer le nom du Dockerfile que nous allons utiliser pour créer l'environnement. Dans mon cas, dans le même dossier .devcontainer, j'en ai un comme celui-ci :

 FROM node:12.16.1-alpine WORKDIR /code RUN apk update && apk upgrade \ && apk add git bash curl \ && npm install -g nodemon COPY . .

Dans cet exemple, j'utilise l'image node: 12.16.1-alpine simplement pour démontrer que la configuration que j'ai dans cet environnement de développement est différente de celle que j'ai localement, où j'utilise la version 14 de Node.js. Par contre, j'installe quelques utilitaires comme git, bash et cURL, en plus du module Nodemon que j'utiliserai lors du développement.

• fordwardPorts : ce sont les ports que mon application utilise pour que je puisse y accéder depuis la machine locale et ainsi le débogage est facile.
• paramètres : pour cet exemple, et lorsque vous avez plusieurs environnements, c'est super utile, j'ai modifié le thème Visual Studio Code pour qu'il soit évident que je ne suis pas dans l'environnement local dans cette instance de l'IDE. J'utilise généralement la version sombre et ici j'ai défini la version claire.
• containerEnv : J'ai également ajouté une variable d'environnement, qui est généralement très utile lors du développement.
• postCreateCommand : j'ai ajouté cette propriété pour que vous puissiez voir qu'il est possible d'exécuter des commandes ou des scripts pendant le cycle de vie du conteneur de développement. Dans ce cas, ce script sera lancé lorsque la création sera terminée. Le contenu de celui-ci est :

   #!/bin/bash # this runs in background after UI is available #Remove node_modules folder echo "Remove node_modules folder first" rm -rf node_modules #Install npm dependencies echo "Install dependencies" npm install

• postAttachCommand : Enfin, j'ai ajouté la commande nodemon server.js à cette propriété afin que chaque fois que vous vous connectez au conteneur, elle lève par défaut l'application.

Il y a beaucoup plus d'options à ajouter dans le fichier devcontainer.json, ce n'est qu'un très petit exemple de ce que vous pouvez faire.

Maintenant que vous savez tout ce qu'il y a dans ce dossier et comment fonctionne la configuration définie, comment la lancer ?

Le moyen le plus simple est d'utiliser ce bouton ici :

Sélectionnez l'option Rouvrir dans le conteneur et le processus commencera à créer le conteneur et votre IDE personnalisé. Le résultat devrait ressembler à ce qui suit :

Au final, le résultat, dans ce cas, sera une fenêtre Visual Studio Code avec le thème Light, avec une version spécifique de Node.js, plusieurs extensions choisies pour développer plus confortablement, et mon application déjà lancée et exposée par le port 8080.

Et le meilleur, c'est que cette configuration est versionnée dans le référentiel du projet afin que tout membre puisse l'utiliser. Tout simplement spectaculaire !

Maintenant que nous avons vu tout cela, et que nous avons compris toutes les étapes, supprimez le dossier .devcontainer, sélectionnez à nouveau l'icône en bas à gauche, sélectionnez à nouveau Reopen in Container et vous verrez que cette fois il vous permet de choisir entre plusieurs pré -configurations construites.

Vous n'avez pas besoin de recommencer votre configuration à partir de zéro, et vous savez également déjà où vous devez toucher pour finir de lui donner votre touche de nerd.

Retour aux Espaces Github

Nous allons maintenant utiliser le même projet que nous avons utilisé dans Visual Studio Remote Containers, mais cette fois avec GitHub. Une fois cela fait dans la section Code , vous aurez une nouvelle option appelée Espaces de code :

Ici, vous pouvez sélectionner le type de machine dont vous avez besoin pour travailler avec ce référentiel spécifique :

Une fois choisi, le processus de création commencera. Il utilisera la configuration du dossier .devcontainer, celui que nous avons créé pour les conteneurs distants, pour configurer l'environnement.

Une fois le processus terminé, vous verrez qu'un code Visual Studio apparaîtra au format Web avec l'application en cours d'exécution, de la même manière que nous l'avons fait sur notre système local.

Derniers mots

Comme vous pouvez le voir dans l'exemple ci-dessus, les espaces de code Github utilisant des conteneurs distants sont une excellente solution à notre problème de réplication de notre environnement de configuration et de développement et ils sont également un excellent moyen d'améliorer les performances de notre équipe.