Comment configurer un Dev Container pour Deno dans GitHub Codespaces ?

Écrit par

18 juillet 2024

0 minutes de lecture

Si vous cherchez des guides et des tutoriels pour vous lancer dans le développement web avec Deno dans un IDE cloud tel que GitHub Codespaces, vous êtes au bon endroit.

Dans cet article, nous explorons Deno, GitHub Codespaces et les Dev Containers, et vous donnons les connaissances nécessaires pour configurer efficacement votre environnement de développement dans le cloud. Cet article s’adresse aux développeurs, en particulier à ceux qui travaillent avec l’écosystème JavaScript et Node.js.

Qu’est-ce que Deno ? Brève présentation

Deno est un environnement d’exécution sécurisé pour JavaScript et TypeScript, conçu avec Rust pour remédier à certaines lacunes de Node.js. Créé par Ryan Dahl, le créateur original de Node.js, il présente plusieurs différences majeures, comme la prise en charge native de TypeScript, un gestionnaire de paquets intégré et une sécurité renforcée grâce à l’isolation en bac à sable.

1// Example of a simple Deno script
2import { serve } from "https://deno.land/std@0.76.0/http/server.ts";
3const s = serve({ port: 8000 });
4console.log("http://localhost:8000/");
5for await (const req of s) {
6  req.respond({ body: "Hello World\n" });
7}
8

Le code ci-dessus est un serveur HTTP simple écrit avec Deno. Remarquez que nous importons directement la fonction serve depuis une URL. C’est l’une des particularités de Deno : il utilise des URL pour les modules, ce qui évite d’avoir besoin d’un fichier package.json et du répertoire node_modules .

Que sont les GitHub Codespaces ?

GitHub Codespaces est un environnement de développement qui vous permet de travailler entièrement dans le cloud. Il met à votre disposition un environnement de développement cloud complet, prêt en quelques secondes et directement intégré à GitHub. Vous pouvez ainsi contribuer à des projets, examiner du code ou résoudre des conflits de fusion depuis votre navigateur, sans rien avoir à configurer sur votre ordinateur.

Que sont les Dev Containers ?

Les Dev Containers, ou conteneurs de développement, font partie de l’extension Remote - Containers de Visual Studio Code. Ils vous permettent de définir un environnement de développement sous forme de code à l’aide d’un fichier devcontainer.json, puis d’exécuter votre projet dans un conteneur Docker isolé. Vous bénéficiez ainsi d’un environnement de développement cohérent et reproductible, partageable avec votre équipe, et dites adieu au problème du « ça marche sur ma machine » ;-)

// Example of a devcontainer.json file
{
  "name": "My Project",
  "dockerFile": "Dockerfile",
  "appPort": [3000],
  "extensions": ["dbaeumer.vscode-eslint"]
}

Ce fichier devcontainer.json définit un Dev Container pour un projet JavaScript simple. Il indique que le Dockerfile du même répertoire doit servir à créer le conteneur, que le port 3000 doit être transféré et que l’extension ESLint doit y être installée.

Voici un autre exemple de fichier devcontainer.json, que vous pouvez ajouter au dépôt de votre projet.

{
    "name": "My Project",
    "dockerFile": "Dockerfile",
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    "extensions": ["dbaeumer.vscode-eslint"],
    "postCreateCommand": "yarn install"
}

Dans l’exemple ci-dessus, le fichier devcontainer.json indique à Visual Studio Code ou à GitHub Codespaces de créer un conteneur Docker à l’aide du Dockerfile du même répertoire. Il configure Bash comme shell par défaut du terminal et installe l’extension eslint. La commande postCreateCommand est exécutée une fois le conteneur créé ; ici, elle lance yarn install pour installer les dépendances du projet.

Les problèmes que les Dev Containers résolvent pour les développeurs

Voici quelques-uns des avantages des Dev Containers.

Des environnements de développement cohérents – Traditionnellement, la configuration d’un environnement de développement nécessitait l’installation et la configuration manuelles des logiciels sur la machine du développeur. Ce processus peut entraîner le fameux syndrome du « ça marche sur ma machine » : le code fonctionne sur l’ordinateur d’un développeur, mais pas sur celui d’un autre, en raison de différences entre leurs environnements. Les Dev Containers résolvent ce problème en définissant l’environnement de développement sous forme de code, afin que tous les développeurs du projet utilisent le même environnement.
Une intégration simplifiée des développeurs – L’intégration de nouveaux développeurs à un projet peut prendre beaucoup de temps, car elle implique de configurer leur environnement de développement et de vérifier qu’ils disposent des bonnes versions de tous les logiciels requis. Les Dev Containers simplifient considérablement ce processus. Il suffit aux nouveaux développeurs de cloner le projet et de l’ouvrir dans Visual Studio Code ou GitHub Codespaces. Leur environnement de développement est alors automatiquement configuré à partir du fichier devcontainer.json.
Une CI/CD simplifiée – Les Dev Containers facilitent également les processus d’intégration continue et de déploiement continu (CI/CD). Comme l’environnement de développement est défini sous forme de code, il peut servir de base à l’environnement CI/CD. Le code est ainsi testé et déployé dans un environnement identique à celui dans lequel il a été développé.

En conclusion, les Dev Containers sont un outil puissant qui garantit des environnements de développement cohérents et reproductibles. Pour configurer Deno sur GitHub Codespaces, il est essentiel de comprendre le rôle et les avantages des Dev Containers.

Configurer Deno sur GitHub Codespaces

Déployer Deno sur GitHub Codespaces permet d’écrire, d’exécuter et de déboguer vos applications Deno directement dans votre navigateur, avec souplesse et efficacité.

Prérequis pour configurer Deno

Avant de commencer, vérifiez que vous disposez des éléments suivants :

Un compte GitHub.
Un accès à GitHub Codespaces. Consultez la documentation GitHub Codespaces pour savoir comment y accéder.
Une connaissance de base de Deno et de son environnement. Si vous découvrez Deno, consultez la documentation officielle de Deno.
Un dépôt de code Deno hébergé sur GitHub

Lancer le GitHub Codespace

Si votre dépôt de code actuel ne contient pas de configuration Dev Container (vous pouvez le vérifier en regardant s’il comporte un répertoire .devcontainer/ à sa racine), vous pouvez tout de même lancer un GitHub Codespace. Un environnement de développement cloud par défaut sera alors créé pour vous.

Dans l’interface web de GitHub, repérez le bouton Code sur la page principale du dépôt, ouvrez l’onglet secondaire Codespaces, puis choisissez de créer un codespace.

Créer un fichier devcontainer.json pour le développement avec Deno

Pour configurer un environnement de développement avec Deno, créez un fichier devcontainer.json dans le répertoire .devcontainer de votre dépôt.

Malheureusement, le projet Deno ne propose pas de prise en charge officielle des Dev Containers, qui permettrait une configuration immédiate dans VS Code et GitHub Codespaces. En mars 2023, des développeurs ont soulevé la question d’un Dev Container pour Deno ; nous en bénéficierons peut-être un jour.

Mais ne perdez pas espoir : grâce à une communauté de développeurs, vous n’avez pas à créer de zéro le fichier de définition du Dev Container. Vous pouvez consulter une liste de fonctionnalités maintenue par la communauté à ajouter.

Suivez ces étapes pour ajouter le Dev Container Deno maintenu par la communauté :

Dans le GitHub Codespace, appuyez sur CMD+SHIFT+P pour ouvrir la palette de commandes de VS Code.
Choisissez Codespaces: Add a Dev Container Configuration Files…, puis sélectionnez Create a new configuration si cette option vous est proposée.
Après quelques secondes, une liste de configurations Dev Container prédéfinies s’affiche.
Choisissez « Show all definitions », puis « Node.js & TypeScript » et enfin « bulleyes » comme image Docker de base.
Enfin, saisissez « Deno », sélectionnez l’option « Deno (via GitHub Releases) », puis choisissez « Keep defaults ».

Créer un conteneur de développement Deno sur GitHub Codespaces

Après avoir confirmé votre sélection, l’IDE VS Code ouvre un nouveau fichier dans le dépôt, à l’emplacement .devcontainer/devcontainer.json. Il contient les éléments suivants :

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
	"name": "Node.js & TypeScript",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
	"features": {
		"ghcr.io/devcontainers-contrib/features/deno:1": {}
	}

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "yarn install",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

Validez le fichier dans le dépôt, puis redémarrons le GitHub Codespace pour lancer le nouvel environnement de développement Dev Container Deno :

Ouvrez de nouveau la palette de commandes de VS Code avec CMD+SHIFT+P.
Choisissez Codespaces: Full Rebuild Container.

Confirmez votre choix. La page se recharge alors avec le nouvel environnement configuré :

Écran de configuration de Codespace montrant une image détectée, l’échec de la création du conteneur et une tentative de récupération.

Tester le Dev Container Deno

Une fois le nouvel environnement de développement Dev Container Deno prêt, ouvrez le volet Terminal et vérifiez que les versions de Node.js et de Deno sont correctement configurées et prêtes à l’emploi :

Environnement de développement Deno Dev Container sur GitHub Codespaces

Extensions VS Code recommandées pour Deno et TypeScript

Si vous utilisez VS Code, vous connaissez déjà les nombreuses extensions disponibles et les avantages qu’elles offrent pour simplifier le développement logiciel. Elles ajoutent des fonctionnalités, améliorent le flux de travail et rendent le codage plus agréable et productif.

N’oubliez pas que les extensions VS Code sont des modules complémentaires qui enrichissent les fonctionnalités de base de l’éditeur. Elles sont principalement développées et proposées par la communauté : elles doivent donc faire l’objet d’audits et d’examens approfondis pour éviter l’introduction de logiciels malveillants et de problèmes de sécurité. J’insiste sur ce point en raison d’une étude de sécurité menée par Snyk en 2021, qui a révélé de nombreuses vulnérabilités dans les extensions VS Code. Veillez à faire preuve de prudence lorsque vous installez des extensions pour votre IDE.

Outil d’analyse statique pour le développement avec Deno

L’écosystème Deno est relativement récent, mais il a rapidement gagné en maturité et propose désormais de nombreuses extensions VS Code adaptées à ses particularités. Voici quelques extensions recommandées pour le développement avec Deno :

Deno (denoland.vscode-deno) : il s’agit de l’extension officielle de Deno pour VS Code. Elle offre des fonctionnalités IntelliSense, de linting, de mise en forme et de débogage pour les projets Deno. Elle déduit automatiquement la configuration de votre projet à partir du fichier deno.json ou deno.jsonc situé à la racine de votre espace de travail.
```
   {
       "compilerOptions": {
           "lib": ["deno.ns", "deno.unstable"]
       }
   }
```
Pour ajouter l’extension VS Code denoland.vscode-deno à un Dev Container, le plus simple est d’ajouter un champ extensions à votre fichier devcontainer.json. Ajoutez ensuite denoland.vscode-deno au tableau extensions de ce fichier.

Voici comment la configurer :
```
{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
  "extensions": [
    "denoland.vscode-deno"
  ]
}
```
Cette configuration permet à VS Code d’installer automatiquement l’extension denoland.vscode-deno dans le Dev Container dès que vous ouvrez votre projet dans un conteneur.
Deno Standard Library Snippets (justjavac.vscode-deno) : cette extension fournit des extraits de code utiles pour la bibliothèque standard de Deno et facilite l’utilisation des modules officiels de Deno dans votre projet.

Sécuriser le code Deno avec Snyk

Avec la complexité croissante des applications logicielles et l’utilisation courante de bibliothèques npm open source dans les développements Node.js et Deno, la sécurité du code n’a jamais été aussi cruciale. Une seule vulnérabilité dans votre code peut avoir des conséquences désastreuses : fuite de données, pertes financières et atteinte à la réputation de votre marque.

Sécuriser votre base de code ne consiste pas seulement à empêcher les attaques : c’est aussi une façon d’instaurer la confiance avec vos utilisateurs. Ils doivent savoir que leurs données sont en sécurité et que les logiciels qu’ils utilisent ont été conçus en tenant compte de leur sécurité.

Dans l’univers JavaScript, qu’il s’agisse de Node.js, Deno ou même Bun, les développeurs s’appuient sur de nombreuses bibliothèques et de nombreux paquets pour accélérer le développement et rendre leurs applications plus efficaces. Toutefois, chaque dépendance tierce ajoutée depuis le registre npm représente un risque potentiel. C’est là que Snyk intervient.

Snyk est un outil de sécurité pensé pour les développeurs, qui les aide à détecter et à corriger les vulnérabilités dans leurs dépendances open source et dans leur code.

Vous souhaitez détecter les vulnérabilités de sécurité dans votre code Deno et ses dépendances imbriquées ? Installez et activez l’extension VS Code Snyk dans le Dev Container Deno :

{
  "name": "...",
  "image": "...",
  "extensions": [
    "snyk-security.snyk-vulnerability-scanner"
  ]
}

Vous bénéficiez alors d’un outil d’analyse de sécurité intégré à votre code, avec des résultats en temps réel. Snyk peut notamment détecter des chemins de code vulnérables, comme cette injection SQL dans du code Node.js :

Pour en savoir plus sur le codage sécurisé et les injections SQL, je vous recommande ce court tutoriel interactif de Snyk Learn sur la sécurité du code, destiné aux développeurs JavaScript.

Extensions de développement Deno et TypeScript

TypeScript est un surensemble de JavaScript à typage statique qui ajoute au langage des types facultatifs, des classes et des modules. Il est largement utilisé dans le développement web moderne, et de nombreuses extensions VS Code prennent en charge et améliorent le développement TypeScript :

TypeScript Hero (rbbit.typescript-hero) : TypeScript Hero offre des fonctionnalités TypeScript avancées, comme l’importation automatique, la génération de code et la refactorisation.
TSLint (ms-vscode.vscode-typescript-tslint-plugin) : TSLint est un linter pour TypeScript. Il applique des règles de style de code et aide à détecter les erreurs courantes dès les premières étapes du développement.
Prettier - Code formatter (esbenp.prettier-vscode) : Prettier est un formateur de code qui impose ses propres conventions. Vous pouvez l’utiliser avec TypeScript pour formater automatiquement votre code selon un style cohérent.

Pour activer Prettier avec TypeScript, ajoutez la configuration suivante à votre fichier .prettierrc :

   {
       "semi": true,
       "trailingComma": "all",
       "singleQuote": true,
       "printWidth": 80,
       "tabWidth": 2
   }

N’oubliez pas que les extensions choisies doivent correspondre aux exigences de votre projet et à votre style de code. Ces extensions recommandées ne sont qu’un point de départ pour découvrir les possibilités de VS Code, Deno, Snyk et TypeScript.