Démarrage rapide pour GitHub Codespaces

Contenu de cet article

Essayez GitHub Codespaces en 5 minutes.

Introduction

Dans ce guide, vous allez créer un codespace à partir d’un modèle de référentiel et explorer certaines des fonctionnalités essentielles disponibles dans le codespace. Vous allez travailler dans la version navigateur de Visual Studio Code, qui est initialement l’éditeur par défaut pour GitHub Codespaces. Après avoir essayé ce guide de démarrage rapide, vous pouvez utiliser Codespaces dans d’autres éditeurs et vous pouvez changer l’éditeur par défaut. Des liens sont fournis à la fin de ce guide.

À partir de ce guide de démarrage rapide, vous allez découvrir comment créer un codespace, vous connecter à un port transféré pour voir votre application s’exécuter, publier votre codespace dans un nouveau dépôt et personnaliser votre configuration avec des extensions.

Pour plus d’informations sur le fonctionnement exact de GitHub Codespaces, consultez le guide complémentaire « Présentation approfondie de GitHub Codespaces ».

Création de votre codespace

Accédez au dépôt de modèles github/haikus-for-codespaces.
Au-dessus de la liste des fichiers, cliquez sur Utiliser ce modèle, puis sélectionnez Ouvrir dans un codespace.

Exécution de l'application

Une fois le codespace créé, le dépôt de modèles est automatiquement cloné dans celui-ci. Vous pouvez maintenant exécuter l’application et la lancer dans un navigateur.

Lorsque le terminal devient disponible, entrez la commande npm run dev. Cet exemple utilise un projet Node.js et cette commande exécute le script intitulé « dev » dans le fichier package.json, qui démarre l’application web définie dans l’exemple de dépôt.

S’il s’agit d’un autre type d’application, entrez la commande de démarrage correspondante pour ce projet.
Quand votre application démarre, le codespace reconnaît le port sur lequel l’application s’exécute et affiche une invite pour vous informer du transfert.
Cliquez sur Ouvrir dans le navigateur pour afficher votre application en cours d’exécution dans un nouvel onglet.

Modifier l’application et afficher les modifications

Revenez à votre codespace et ouvrez le fichier haikus.json en cliquant dessus dans l’Explorateur.
Modifiez le champ text du premier haiku pour personnaliser l’application avec votre propre haiku.
Revenez à l’onglet de l’application en cours d’exécution dans votre navigateur et actualisez pour afficher vos modifications.

Si vous avez fermé l’onglet, ouvrez le panneau Ports et cliquez sur l’icône Ouvrir dans le navigateur pour le port en cours d’exécution.

Validation (commit) et envoi (push) de vos modifications

Maintenant que vous avez apporté quelques modifications, vous pouvez utiliser le terminal intégré ou la vue source pour publier votre travail dans un nouveau dépôt.

Dans la barre d’activité, cliquez sur la vue Contrôle de code source.
Pour indexer vos changements, cliquez sur + à côté du fichier haikus.json. Vous pouvez également cliquer à côté de Changements si vous avez changé plusieurs fichiers, et si vous souhaitez les indexer.
Pour commiter vos changements indexés, tapez un message de commit décrivant la modification que vous avez apportée, puis cliquez sur Commiter.
Cliquez sur Publier la branche.
Dans la liste déroulante « Nom du dépôt », tapez un nom pour votre nouveau dépôt, puis sélectionnez Publier sur le dépôt privé GitHub ou Publier sur le dépôt public GitHub .

Le propriétaire du nouveau dépôt est le compte GitHub avec lequel vous avez créé le codespace.
Dans la fenêtre contextuelle qui s’affiche dans le coin inférieur droit de l’éditeur, cliquez sur Ouvrir sur GitHub pour afficher le nouveau dépôt sur GitHub.com. Dans le nouveau dépôt, affichez le fichier haikus.json et vérifiez que la modification que vous avez apportée dans votre codespace a bien été poussée dans le dépôt.

Personnalisation avec une extension

Quand vous vous connectez à un codespace avec le navigateur ou l’application de bureau Visual Studio Code, vous pouvez accéder à la Place de marché Visual Studio Code directement à partir de l’éditeur. Pour cet exemple, vous allez installer une extension VS Code qui modifie le thème, mais vous pouvez installer toute extension utile pour votre workflow.

Dans la barre latérale gauche, cliquez sur l’icône Extensions.
Dans la barre de recherche, tapez fairyfloss et cliquez sur Installer.
Sélectionnez le thème fairyfloss en le sélectionnant dans la liste.

Si vous utilisez un codespace dans le navigateur ou dans l’application de bureau Visual Studio Code et que vous avez activé Synchronisation des paramètres, toutes les modifications que vous apportez à la configuration de votre éditeur dans le codespace actuel, comme changer votre thème ou des associations de touches, sont automatiquement synchronisées avec toutes les instances de Visual Studio Code qui sont signées dans votre compte GitHub et avec tous les autres codespaces que vous créez.

Étapes suivantes

Vous avez créé, personnalisé et exécuté avec succès votre première application dans un codespace. Il vous reste encore beaucoup de choses à découvrir. Voici quelques ressources utiles pour effectuer vos étapes suivantes avec GitHub Codespaces.

« Présentation approfondie » : ce guide de démarrage rapide a présenté certaines des fonctionnalités de GitHub Codespaces. La présentation approfondie examine ces domaines d’un point de vue technique.
« Ajouter une configuration de conteneur de développement à votre dépôt » : ces guides fournissent des informations sur la configuration de votre dépôt pour utiliser GitHub Codespaces avec des langages spécifiques.
« Présentation des conteneurs de développement » : ce guide fournit des détails sur la création d’une configuration personnalisée pour Codespaces pour votre projet.