Einrichten eines Vorlagenrepositorys für GitHub Codespaces

Einführung

Indem du ein Vorlagenrepository einrichtest, kannst du Personen bei den ersten Schritten mit deinem Framework, deiner Bibliothek oder einem anderen Projekt in GitHub Codespaces helfen. Benutzer können deine Vorlagendateien sofort in einer cloudbasierten Entwicklungsumgebung verwenden, ohne sich Gedanken über das Klonen deines Repositorys oder die Installation von Tools oder anderen Abhängigkeiten machen zu müssen. Mit einigen Konfigurationsschritten kannst du Benutzer in einem Codespace einrichten, in dem wichtige Dateien bereits für die Bearbeitung geöffnet sind und in dem bereits eine Anwendung auf einer Vorschaubrowserregisterkarte im VS Code-Web-Editor ausgeführt wird.

Jeder Benutzer mit Lesezugriff auf dein Vorlagenrepository kann auf der Seite des Repositorys in GitHub einen Codespace erstellen. Du kannst jedes vorhandene Repository in eine Vorlage umwandeln, und du musst keine Einstellungen ändern, damit Benutzer einen Codespace aus deinem Vorlagenrepository erstellen können. Weitere Informationen zum Umwandeln eines Repositorys in eine Vorlage findest du unter Erstellen eines Vorlagenrepositorys.

Du kannst einen Link im Format https://github.com/codespaces/new?template_repository=OWNER/TEMPLATE-REPO bereitstellen, um Benutzer direkt zur Seite „Erstellen eines neuen Codespace“ für deine Vorlage weiterzuleiten.

Beispielsweise kannst du diesen Link in einem Tutorial für die ersten Schritte mit deinem Framework bereitstellen. Ersetze OWNER/TEMPLATE-REPO in deinem Link durch den Namen des Vorlagenrepositorys, z. B. monalisa/octo-template.

Wenn ein Benutzer einen Codespace aus deiner Vorlage erstellt, wird der Inhalt deines Vorlagenrepositorys in seinem Codespace geklont. Wenn der Benutzer bereit ist, kann er seine Arbeit in einem neuen Repository in GitHub veröffentlichen, das zu seinem persönlichen Konto gehört. Alle Nutzungsgebühren für den Codespace werden dem Benutzer in Rechnung gestellt, der ihn erstellt hat. Weitere Informationen findest du unter Erstellen eines Codespace aus einer Vorlage.

Beschreiben deiner Vorlage

Wenn du keine Infodatei für dein Vorlagenrepository besitzt, erstelle eine, um den Zweck deiner Vorlage und die ersten Schritte damit zu beschreiben. Weitere Informationen findest du unter Informationen zu README-Dateien.

Eine kurze Beschreibung deiner Vorlage wird auf der Seite „Erstellen eines neuen Codespace“ angezeigt, zu der Benutzer gelangen, wenn sie dem Link https://github.com/codespaces/new?template_repository=OWNER/TEMPLATE-REPO folgen. Diese Beschreibung stammt aus dem Feld Beschreibung, das du beim Erstellen eines Repositorys festlegen kannst. Du kannst diese Beschreibung jederzeit bearbeiten, indem du zur Seite des Repositorys navigierst und rechts auf der Seite neben dem Abschnitt Info auf klickst.

Hinzufügen von Startdateien

Vorlagenrepositorys enthalten in der Regel Startdateien mit Codebausteinen, sodass Benutzer schnell mit einer Bibliothek, einem Framework oder einer anderen Technologie beginnen können.

Eine Anleitung zu den zu integrierenden Dateitypen findest du in den Startdateien, die in den offiziellen GitHub-Vorlagen für GitHub Codespaces enthalten sind:

1. Navigiere zur Seite „Deine Codespaces“ unter github.com/codespaces. 1. Um die vollständige Liste der Vorlagen anzuzeigen, klicke unter „Schnellstartvorlagen durchsuchen“ auf Alle anzeigen.

   

2. Um das Vorlagenrepository anzuzeigen, das die Dateien für die Vorlage enthält, klicke auf den Namen der Vorlage.

   

Konfigurieren des Entwicklungscontainers

Du kannst deinem Vorlagenrepository Konfigurationsdateien für Entwicklungscontainer hinzufügen, um die Entwicklungsumgebung für Personen, die deine Vorlage verwenden, mit GitHub Codespaces anzupassen. Du kannst aus einer Liste vordefinierter Konfigurationseinstellungen in Visual Studio Code wählen oder eine benutzerdefinierte Konfiguration erstellen, indem du eine eigene Datei vom Typ devcontainer.json schreibst. Wenn du keine Konfigurationsdateien hinzufügst, wird das Standardcontainerimage verwendet. Weitere Informationen findest du unter Einführung in Entwicklungscontainer und Hinzufügen einer Entwicklungscontainerkonfiguration zu deinem Repository.

Du solltest deinen Entwicklungscontainer mit den Tools und Anpassungen konfigurieren, um Benutzern eine optimale Nutzung deiner Vorlage zu ermöglichen. Gehe in deiner Datei devcontainer.json beispielsweise wie folgt vor:

• Du kannst die openFiles-Eigenschaft verwenden, um eine Liste von Dateien zu definieren, die automatisch im VS Code-Webclient geöffnet werden sollen, wenn ein Codespace aus deiner Vorlage erstellt wird.
• Wenn deine Vorlage Dateien für eine Webanwendung enthält, kannst du die Anwendung automatisch im Codespace des Benutzers ausführen lassen. Dazu kannst du mithilfe der postAttachCommand-Eigenschaft ein Skript ausführen, das die Anwendung auf einem lokalen Server startet, sobald der VS Code-Webclient eine Verbindung mit dem Codespace herstellt. Lege außerdem die onAutoForward-Eigenschaft eines Ports auf openPreview fest, um die Anwendung, die an diesem Port ausgeführt wird, in einem einfachen Browser anzuzeigen, der in den VS Code-Webclient eingebettet ist.

Die folgenden Konfigurationseinstellungen für eine React-Vorlage öffnen die Datei app.js im Editor des Benutzers, führen npm start (in einer package.json-Datei definiert) aus, um einen lokalen Server zu starten, und leiten den Port 3000 an eine Vorschaubrowserregisterkarte im Codespace weiter.

{
    "postAttachCommand": {
      "server": "npm start"
    },

    "portsAttributes": {
      "3000": {
        "label": "Application",
        "onAutoForward": "openPreview"
      }
    },

    "customizations": {
      "codespaces": {
        "openFiles": ["src/App.js"]
      }
    }
}

Weitere Informationen findest du unter Automatisches Öffnen von Dateien in den Codespaces für ein Repository und Entwicklungscontainerspezifikation auf der Website für Entwicklungscontainer.