[Un développeur portant un t-shirt bleu se trouve à la maison, derrière un micro et un bouclier décoré du logo Octocat de GitHub. Le développeur partage son écran tout en s’affichant sur la webcam dans le coin supérieur droit. Sur leur écran, ils regardent un dépôt GitHub appelé « js-project ».]
Développeur : Aujourd’hui, nous allons exécuter mon projet JavaScript dans GitHub Codespaces.
[Dans la page du dépôt, au-dessus de la liste des fichiers, le développeur sélectionne le bouton « Code » pour ouvrir un menu déroulant. Il clique sur « Ouvrir avec Codespaces », puis sur « Nouveau codespace ».]
Développeur : Alors que nous créons notre codespace, vous pourriez vous demander : « Qu’est-ce qu’un codespace ? »
[Dans le navigateur, le codespace se charge. Sur un arrière-plan blanc, le texte « Préparation de votre codespace » s’affiche sous le logo Octocat de GitHub et un logo VS Code.]
Développeur : un codespace est un environnement de développement cloud instantané, où nous pouvons exécuter, tester, déboguer, envoyer (push) : tout ce que nous avons l’habitude de faire dans un environnement de développement, mais sans aucune configuration d’ordinateur que nous avons l’habitude de faire localement.
[Le codespace s’ouvre dans l’éditeur web VS Code dans le navigateur, s’exécutant avec le thème sombre. Les répertoires et fichiers du dépôt s’affichent dans la barre latérale gauche. Dans un terminal intégré, un message indique « Bienvenue dans Codespaces » et répertorie les runtimes et les outils inclus.]
Développeur : lorsque nous créons ce codespace, vous verrez que nous atterrissons sur une machine qui est déjà configurée, et qui a Python, Node, Docker, et bien plus encore. Elle dispose donc d’outils comme Java, Rust, Go et C++.
Mais vous verrez que nous avons atterri dans l’image par défaut. Ce qui est super avec Codespaces, c’est que vous pouvez personnaliser entièrement votre configuration, non seulement pour vous, mais aussi pour tous les autres qui viennent dans ce dépôt. Vous pouvez donc disposer d’une configuration « en tant que code » qui vous permet d’utiliser votre propre image, Dockerfile ou Docker Compose.
Donc, pour notre application, nous allons commencer par la démarrer. Je vais donc exécuter npm start ici, et vous verrez que notre application s’exécute sur le port 3000 et que nous pouvons l’ouvrir dans le navigateur et nous connecter en toute sécurité à un port transféré disposant de notre application, entièrement opérationnelle.
[Une fenêtre contextuelle s’affiche pour le port transféré. Dans la fenêtre contextuelle, le développeur clique sur un bouton intitulé « Ouvrir dans le navigateur ». Un nouvel onglet de navigateur s’ouvre montrant une page web intitulée « Haikus for Mona ». Sur la page web, une illustration montre Mona the Octocat avec le sourire, sautant sur une flaque d’eau avec un parapluie violet. Sous l’image, un haiku: « Rain in Seattle. Don’t forget an umbrella, or it will be gloom. »
Développeur : vous verrez donc ici mon application Node, opérationnelle, connectée à un codespace. Et cela nous a pris environ 60 secondes à configurer dans Codespaces.
[Le développeur fait défiler jusqu’à une image de Mona qui tapote un lecteur de disque avec son tentacule.]
Développeur : vous pouvez donc imaginer cette solution, entièrement personnalisée, vraiment réduire le temps d’installation de chaque dépôt dont vous disposez.
Et voici un aperçu rapide de GitHub Codespaces.
Fin de la transcription. Pour plus d’informations sur GitHub Codespaces, consultez la documentation GitHub Codespaces.