Création d’un codespace à partir d’un modèle

Si vous démarrez un nouveau projet, vous pouvez créer un codespace à partir d’un modèle vide ou choisir un modèle spécialement conçu pour le type de travail que vous souhaitez effectuer.

Dans cet article

À propos des modèles pour GitHub Codespaces

Si vous démarrez un nouveau projet, vous pouvez commencer rapidement à travailler sur le développement en créant un codespace à partir d’un modèle. Vous pourrez travailler sur votre projet dans un environnement de développement cloud, enregistrer vos fichiers dans le cloud et publier votre travail dans un nouveau dépôt distant que vous pouvez partager avec d’autres personnes ou cloner sur votre ordinateur local.

Vous pouvez commencer à partir d’un modèle vide, choisir parmi les modèles gérés par GitHub pour les technologies populaires telles que React ou Jupyter Notebook ou lancer un codespace à partir d’un dépôt de modèles sur GitHub.

Si vous utilisez un modèle vide, vous commencez avec un répertoire vide et vous pouvez accéder à des ressources de calcul informatiques ainsi qu’aux outils, langages et environnements d’exécution qui sont préinstallés avec l’image conteneur de développement par défaut. Avec d’autres modèles, vous obtenez des fichiers de démarrage pour la technologie que vous utilisez ainsi que des fichiers supplémentaires tels qu’un fichier README, un fichier .gitignore et des fichiers de configuration de conteneur de développement comportant une configuration d’environnement personnalisée. Pour plus d’informations sur les conteneurs de développement et l’image par défaut, consultez « Présentation des conteneurs de développement ».

Par exemple, si vous créez un codespace à partir du modèle React de GitHub, vous arrivez dans un espace de travail contenant des fichiers de modèle pour une application simple, tels que index.js, app.js et package.json. Peu après l’ouverture du codespace, un serveur de développement démarre automatiquement et vous pouvez afficher l’application en cours d’exécution sous un simple onglet de navigateur dans le client web VS Code.

Capture d’écran du navigateur simple de VS Code montrant l’application web dans le modèle React de GitHub.

Les fichiers et la configuration inclus dans les modèles sont définis dans des dépôts de modèles. Le dépôt de modèles est cloné dans votre codespace quand vous créez celui-ci. Ensuite, le lien est rompu et votre codespace n’est pas lié à un dépôt distant tant que vous n’y publiez pas.

Conseil : Pour aider les utilisateurs à démarrer avec votre framework, bibliothèque ou autre projet, vous pouvez configurer un dépôt de modèles à utiliser avec GitHub Codespaces. Pour plus d’informations, consultez « Configuration d’un dépôt modèle pour GitHub Codespaces ».

Création d’un codespace à partir d’un modèle GitHub

Les modèles gérés par GitHub, y compris le modèle vide, sont disponibles à partir de la page « Vos codespaces ».

  1. Dans le coin supérieur gauche de GitHub, sélectionnez , puis cliquez sur Codespaces pour accéder à la page « Vos codespaces » sur github.com/codespaces.

  2. Pour voir la liste complète des modèles, dans la section « Explorer les modèles de démarrage rapide », cliquez sur Tout voir.

    Capture d’écran de la section « Explorer les modèles de démarrage rapide ». « Tout voir » est mis en évidence avec un encadré orange foncé.

  3. Si vous le souhaitez, pour afficher le dépôt de modèles contenant les fichiers d’un modèle, cliquez sur le nom du modèle.

    Capture d’écran de la section « Explorer les modèles de démarrage rapide » de la page des codespaces. Trois modèles sont répertoriés et les noms des modèles sont mis en évidence avec des encadrés orange.

  4. Sous le nom du modèle que vous souhaitez lancer, cliquez sur Utiliser ce modèle.

Lorsque vous créez un codespace à partir d’un modèle, celui-ci s’ouvre toujours dans le client web Visual Studio Code. Vous pouvez rouvrir un codespace existant dans n’importe quel éditeur pris en charge. Pour plus d’informations, consultez « Ouverture d’un codespace existant ».

Création d’un codespace à partir d’un dépôt de modèles

Vous pouvez créer un codespace à partir de n’importe quel dépôt de modèles, puis publier votre travail dans un nouveau dépôt quand vous êtes prêt. Pour plus d’informations sur les dépôts de modèles, consultez « Création d’un dépôt à partir d’un modèle ».

  1. Sur GitHub, accédez à la page principale du référentiel.

  2. Cliquez sur Utiliser ce modèle, puis sur Ouvrir dans un codespace.

    Capture d’écran du bouton « Utiliser ce modèle » et du menu déroulant développé pour afficher l’option « Ouvrir dans un codespace ».

    Remarque : Si vous êtes chargé de maintenance du dépôt de modèles et que vous souhaitez commiter les modifications apportées au dépôt de modèles lui-même, vous devez créer un codespace à partir de la liste déroulante Code. Pour plus d’informations, consultez « Création d’un codespace pour un dépôt ».

Lorsque vous créez un codespace à partir d’un modèle, celui-ci s’ouvre toujours dans le client web Visual Studio Code. Vous pouvez rouvrir un codespace existant dans n’importe quel éditeur pris en charge. Pour plus d’informations, consultez « Ouverture d’un codespace existant ».

Publication dans un dépôt sur GitHub

Lorsque vous travaillez dans un codespace créé à partir d’un modèle, votre travail est enregistré sur une machine virtuelle dans le cloud, mais il n’est pas stocké dans un dépôt sur GitHub.

Vous pouvez enregistrer vos fichiers, fermer et arrêter votre codespace, puis revenir à votre travail plus tard. En règle générale, Git est préinstallé et le répertoire de travail est automatiquement initialisé en tant que dépôt Git, sauf si vous avez démarré à partir du modèle vide de GitHub. Cela signifie que vous pouvez utiliser Git tout de suite pour le contrôle de code source local, comme l’ajout et le commit de fichiers.

Toutefois, si vous supprimez un codespace non publié, ou s’il est automatiquement supprimé parce qu’il est resté inutilisé pendant la durée de la période de conservation, votre travail est également supprimé. Pour conserver votre travail et permettre à d’autres personnes de travailler sur votre projet, vous devez publier votre codespace dans un dépôt sur GitHub.

Remarque : si un codespace non publié est actuellement facturé à une organisation, la publication du codespace entraîne le transfert de la propriété et de la facturation du codespace à votre compte personnel. Consultez « À propos de la facturation pour GitHub Codespaces ».

Publication à partir de VS Code

Si vous travaillez dans un codespace, vous pouvez le publier à partir de l’application de bureau ou du client web VS Code.

  1. Dans la barre d’activités, cliquez sur la vue Contrôle de code source.

    Capture d’écran de la barre d’activités VS Code avec le bouton Contrôle de code source mis en surbrillance avec un encadré orange.

  2. Pour indexer vos changements, cliquez sur + à côté du fichier que vous avez ajouté ou changé, ou à côté de Changements si vous avez changé plusieurs fichiers et que vous voulez les indexer tous.

    Capture d’écran de la barre latérale « Contrôle de code source » avec le bouton de préproduction (signe plus), à droite de « Modifications », mis en évidence avec un contour orange foncé.

    Remarque : Si vous commencez à partir du modèle vide de GitHub, vous ne verrez pas de liste de changements, sauf si vous avez déjà initialisé votre répertoire en tant que dépôt Git. Pour publier des codespaces créés à partir du modèle vide, cliquez sur Publier sur GitHub dans la vue Contrôle de code source, puis passez à l’étape 5.

  3. Pour commiter vos changements indexés, tapez un message de commit décrivant la modification que vous avez apportée, puis cliquez sur Commiter.

    Capture d’écran de la barre latérale « Contrôle de code source » avec un message de validation et, en dessous, le bouton « Valider » mis en évidence avec un contour orange foncé.

  4. Cliquez sur Publier la branche.

    Capture d’écran de la barre latérale « Contrôle de code source » montrant le bouton « Publier la branche ».

  5. 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 .

    Capture d’écran du menu déroulant du nom du référentiel dans VS Code. Deux options s’affichent pour publier sur un dépôt privé ou public.

    Le propriétaire du nouveau dépôt est le compte GitHub avec lequel vous avez créé le codespace.

  6. Dans la fenêtre contextuelle qui s’affiche dans le coin inférieur droit de l’éditeur, cliquez éventuellement sur Ouvrir dans GitHub pour afficher le nouveau dépôt sur GitHub.

    Capture d’écran d’un message de confirmation d’un dépôt publié avec succès, montrant le bouton « Ouvrir sur GitHub ».

Quand un codespace est publié, vous avez accès à un plus grand nombre d’options pour personnaliser votre expérience GitHub Codespaces. Par exemple, vous pouvez :

Publication à partir de GitHub

Vous pouvez publier un codespace non publié à partir de la page « Vos codespaces » sur GitHub. Cela est utile si vous souhaitez publier un codespace que vous n’avez pas ouvert dans votre navigateur. Dans ce cas, votre travail est conservé dans un dépôt, mais il n’y a pas de lien entre votre codespace existant et le nouveau dépôt. Toutefois, vous pouvez accéder au nouveau dépôt et créer un codespace à partir de là ; ce codespace sera alors connecté au dépôt.

  1. Dans le coin supérieur gauche de GitHub, sélectionnez , puis cliquez sur Codespaces pour accéder à la page « Vos codespaces » sur github.com/codespaces.

  2. En regard du codespace non publié, cliquez sur les points de suspension ( ... ), puis sélectionnez Publier dans un nouveau dépôt.

    Capture d’écran du menu déroulant d’un codespace, montrant l’option « Publier dans un nouveau dépôt ».

  3. Choisissez un nom pour votre nouveau dépôt, définissez-le comme Public ou Privé, puis cliquez sur Créer le dépôt.

    Capture d’écran de la liste déroulante « Publier dans un nouveau dépôt », avec le champ « Nom », les options « Public » et « Privé » et le bouton « Créer un dépôt ».

  4. Si vous le souhaitez, pour afficher le nouveau dépôt, cliquez sur Voir le dépôt.

Pour aller plus loin