Diese Seite wurde von der Cloud Translation API übersetzt.

Benutzerdefinierte Vorlage erstellen

Firebase Studio bietet eine Vielzahl von integrierten Vorlagen, die alle Dateien, Systempakete (z. B. Compiler) und Erweiterungen enthalten, die Sie benötigen, um schnell mit einer Sprache oder einem Framework zu beginnen.

Sie können auch einen Firebase Studio-Arbeitsbereich mit Community-Vorlagen starten, die auf GitHub gehostet werden. Weitere Informationen zum Erstellen eines neuen Arbeitsbereichs aus einer Vorlage finden Sie unter Firebase Studio-Arbeitsbereich erstellen.

Die meisten Nutzer verwenden die integrierten Vorlagen oder importieren Projekte aus Git. Für komplexere Anwendungsfälle können Sie jedoch auch eigene Vorlagen erstellen:

Wenn Sie ein eigenes Framework, eine eigene Bibliothek oder einen eigenen Dienst entwickeln, können Sie Ihren Nutzern einen schnellen Einstieg in Ihre Technologie ermöglichen, ohne dass sie den Browser verlassen müssen. Dabei steht ihnen die volle Leistung einer cloudbasierten virtuellen Maschine zur Verfügung.
Wenn Sie einen bevorzugten Technologie-Stack für Ihre Projekte haben, können Sie den Prozess zum Starten neuer Projekte mit einer benutzerdefinierten Vorlage vereinfachen.
Wenn Sie andere unterrichten, z. B. in einem Tutorial oder Codelab, können Sie einige der ersten Schritte für Ihre Schüler entfernen, indem Sie den Ausgangspunkt für Ihr Codelab als benutzerdefinierte Vorlage vorkonfigurieren.

Nachdem Sie Ihre benutzerdefinierte Vorlage erstellt und getestet haben, können Sie einen Link dafür erstellen, den Sie auf Ihrer Website, in Ihrer README-Datei im Git-Repository, auf der Paketdetailseite (z. B. in NPM) oder an einer anderen Stelle platzieren, an der Nutzer Ihre Technologie verwenden sollen.

Vorbereitung

Hinweise:

Informationen zum Anpassen Ihrer Umgebung mit der Datei idx/dev.nix
Machen Sie sich mit den Grundlagen der Nix-Sprache vertraut und halten Sie die Referenz bereit.

Struktur der Vorlagendatei

Eine Firebase Studio-Vorlage ist ein öffentliches Git-Repository (oder ein Ordner oder Branch in einem Repository), das mindestens zwei Dateien enthält:

idx-template.json enthält die Metadaten für die Vorlage, einschließlich des für Nutzer sichtbaren Namens, der Beschreibung und der Parameter, die Nutzern zur Konfiguration der Vorlage zur Verfügung stehen. Sie können Ihren Nutzern beispielsweise erlauben, aus einer Reihe von Programmiersprachen oder Anwendungsbeispielen auszuwählen. Firebase Studio verwendet diese Informationen, um die Benutzeroberfläche vorzubereiten, die Nutzern angezeigt wird, wenn sie einen neuen Arbeitsbereich aus Ihrer Vorlage erstellen.
idx-template.nix ist eine Datei, die mit der Nix-Sprache geschrieben wurde und ein Bash-Shell-Skript (eingebettet in eine Nix-Funktion) enthält, das:
1. Erstellt das Arbeitsverzeichnis für den neuen Arbeitsbereich.
2. Richtet die Umgebung ein, indem eine .idx/dev.nix-Datei erstellt wird. Sie können in diesem Skript auch einfach ein Tool zum Erstellen von Projektgerüsten wie flutter create oder npm init oder ein benutzerdefiniertes Skript ausführen, das in Go, Python, Node.js oder einer anderen Sprache geschrieben wurde.
  
  Diese Datei wird mit den vom Nutzer angegebenen Parametern ausgeführt, wenn Firebase Studio die Vorlage lädt.

Neben diesen beiden Dateien können auch andere Dateien für die Verwendung in idx-template.nix enthalten sein, um die Vorlage zu instanziieren. Sie können beispielsweise die endgültige .idx/dev.nix-Datei oder sogar alle Gerüstdateien direkt in das Repository aufnehmen.

Startervorlage erstellen

Um die Erstellung von Vorlagen zu beschleunigen, empfehlen wir, mit einer der folgenden Methoden eine Firebase Studio-Vorlage zu erstellen, die Sie weiter anpassen können:

Jedes öffentliche GitHub-Repository in eine Vorlage umwandeln
Offizielle Vorlage oder Community-Vorlage als Grundlage für Ihre Vorlage verwenden

Einfaches Beispiel: Ein beliebiges öffentliches GitHub-Repository in eine Vorlage umwandeln

Bevor wir uns ansehen, wie Sie idx-template.json und idx-template.nix definieren, ist es hilfreich, sich eine einfache Beispielvorlage anzusehen, die:

Enthält keine vom Nutzer konfigurierbaren Parameter.
Kopiert alle Dateien in Ihrem Vorlagen-Repository (mit Ausnahme der beiden idx-template-Dateien) in den Arbeitsbereich des Nutzers. Es sollte bereits einen .idx-Unterordner mit einer dev.nix-Datei geben, in der die Umgebung definiert ist.

Wenn Sie die folgenden Dateien einem öffentlichen GitHub-Repository (oder Unterordner oder Branch) hinzufügen, wird dieses Repository effektiv zu einer Firebase Studio-Vorlage.

`idx-template.json`

{
  "name": "Hello world",
  "description": "A template for a CLI program that prints 'hello world'",
  "icon": "https://www.gstatic.com/images/branding/productlogos/studio/v1/192px.svg",
  "params": []
}

`idx-template.nix`

# No user-configurable parameters
{ pkgs, ... }: {
  # Shell script that produces the final environment
  bootstrap = ''
    # Copy the folder containing the `idx-template` files to the final
    # project folder for the new workspace. ${./.} inserts the directory
    # of the checked-out Git folder containing this template.
    cp -rf ${./.} "$out"

    # Set some permissions
    chmod -R +w "$out"

    # Remove the template files themselves and any connection to the template's
    # Git repository
    rm -rf "$out/.git" "$out/idx-template".{nix,json}
  '';
}

Unter Vorlage anpassen finden Sie Informationen zu weiteren Änderungen, die Sie vornehmen können.

Benutzerdefinierte Vorlage mit einer offiziellen Vorlage oder einer Community-Vorlage erstellen

Das Firebase Studio-Team verwaltet zwei Repositories für Firebase Studio-Vorlagen:

Offizielle Vorlagen: Das sind die Vorlagen, die Sie direkt im Firebase Studio-Dashboard auswählen, wenn Sie eine neue App erstellen.
Community-Vorlagen: Diese Vorlagen können von der Open-Source-Community mitgestaltet werden. Wenn Sie eine Community-Vorlage verwenden möchten, klonen Sie das Git-Repository für Community-Vorlagen. Sie können den vollständigen Link zur gewünschten Vorlage verwenden.

Tipp :Wenn Sie die Community unterstützen möchten, indem Sie neue Vorlagen hinzufügen oder vorhandene Vorlagen aktualisieren, senden Sie eine Pull-Anfrage.

So erstellen Sie eine benutzerdefinierte Vorlage auf Grundlage einer vorhandenen Vorlage:

Entscheiden Sie, welche Vorlage Sie als Grundlage für Ihre benutzerdefinierte Vorlage verwenden möchten, und klonen Sie das Projekt.
Passen Sie idx-template.json, idx-template.nix und .idx/dev.nix nach Bedarf an. Beginnen Sie mit Vorlage anpassen.
Checken Sie die Änderungen in Ihr Repository ein.
Folgen Sie der Anleitung unter Neuen Arbeitsbereich für Ihre Vorlage erstellen, um Ihre Vorlage zu veröffentlichen und zu testen. Wenn Sie ein verschachteltes Repository verwenden, verlinken Sie direkt darauf in Ihrer URL. Wenn Sie beispielsweise die Community-Vorlage „Vanilla Vite“ verwendet haben, würden Sie einen neuen Arbeitsbereich mit der folgenden URL bereitstellen und testen:
```
https://studio.firebase.google.com/new?template=https://github.com/firebase-studio/community-templates/tree/main/vite-vanilla
```

Unter Vorlage anpassen finden Sie Informationen zu weiteren Änderungen, die Sie vornehmen können.

Vorlage anpassen

Nachdem Sie eine einfache Vorlage erstellt haben, auf der Sie aufbauen können, können Sie die Dateien idx-template.json, idx-template.nix und .idx/dev.nix bearbeiten, um sie an Ihre Anforderungen anzupassen. Möglicherweise möchten Sie zusätzliche Konfigurationen anpassen:

Fügen Sie Ihrem bootstrap-Skript Systempakete hinzu.
Vom Nutzer konfigurierbare Parameter hinzufügen
Auswählen, welche Dateien standardmäßig geöffnet werden sollen
Standardsymbol für Arbeitsbereich auswählen

Zusätzliche Systempakete in Ihrem `bootstrap`-Skript verwenden

Im einfachen Beispiel werden nur grundlegende POSIX-Befehle verwendet, um Dateien an den richtigen Ort zu kopieren. Für das bootstrap-Skript Ihrer Vorlage müssen möglicherweise zusätzliche Binärdateien installiert werden, z. B. git, node, python3 oder andere.

Sie können zusätzliche Systempakete für Ihr Bootstrap-Skript verfügbar machen, indem Sie packages in Ihrer idx-template.nix-Datei angeben. Das ist genauso, wie Sie einen Arbeitsbereich mit zusätzlichen Systempaketen anpassen, indem Sie die packages-Datei um dev.nix ergänzen.

Hier ist ein Beispiel für das Hinzufügen von pkgs.nodejs, das Binärdateien wie node, npx und npm enthält:

# idx-template.nix
{pkgs}: {
  packages = [
    # Enable "node", "npm" and "npx" in the bootstrap script below.
    # Note, this is NOT the list of packages available to the workspace once
    # it's created. Those go in .idx/dev.nix
    pkgs.nodejs
  ];

  bootstrap = ''
    mkdir "$out"
    # We can now use "npm"
    npm init --yes my-boot-strap@latest "$out"
  ''
}

Vom Nutzer konfigurierbare Parameter hinzufügen

Damit Nutzer den Ausgangspunkt für ihr neues Projekt anpassen können, haben Sie zwei Möglichkeiten: Sie können entweder mehrere Vorlagen oder eine einzelne Vorlage mit Parametern erstellen. Das ist eine gute Option, wenn sich Ihre verschiedenen Ausgangspunkte nur durch unterschiedliche Werte unterscheiden, die an ein CLI-Tool übergeben werden (z. B. --language=js im Vergleich zu --language=ts).

So fügen Sie Parameter hinzu:

Beschreiben Sie den Parameter im params-Objekt Ihrer idx-template.json-Metadatendatei. Firebase Studio verwendet Informationen in dieser Datei, um die Benutzeroberfläche vorzubereiten, die Nutzern Ihrer Vorlage angezeigt wird, z. B. Kontrollkästchen, Drop-down-Menüs und Textfelder.
Aktualisieren Sie den idx-template.nix-Bootstrap, damit die Werte verwendet werden, die der Nutzer beim Instanziieren der Vorlage ausgewählt hat.

Beschreiben Sie den Parameter in `idx-template.json`.

Hier sehen Sie ein Beispiel für das Hinzufügen eines enum-Parameters, der je nach Anzahl der Optionen als Drop-down-Menü oder Optionsfeldgruppe angezeigt wird:Firebase Studio

{
  "name": "Hello world",
  "description": "A hello world app",
  "params": [
    {
      "id": "language",
      "name": "Programming Language",
      "type": "enum",
      "default": "ts",
      "options": {
        "js": "JavaScript",
        "ts": "TypeScript"
      },
      "required": true
    }
  ]
}

Da es zwei Werte gibt (JavaScript und TypeScript), wird in der Benutzeroberfläche eine Gruppe von Optionsfeldern für die beiden Optionen gerendert und entweder der Wert ts oder js an das idx-template.nix-Script übergeben.

Jedes Parameterobjekt hat die folgenden Attribute:

PROPERTY	TYP	BESCHREIBUNG
id	`string`	Die eindeutige ID des Parameters, ähnlich einem Variablennamen.
Name	`string`	Der Anzeigename für diesen Parameter.
Typ	`string`	Gibt die UI-Komponente an, die für diesen Parameter verwendet werden soll, und den Datentyp, der an das Bootstrap-Script übergeben werden soll. Gültige Werte sind: `"enum"`: Zeigt eine Drop-down- oder Optionsfeldgruppe an und übergibt eine `string` an den Bootstrap. `"boolean"` – Zeigt ein Kästchen an und übergibt `true` oder `false`. `"text"` – Zeigt ein Textfeld an und übergibt eine `string`
Options	`object`	Für `enum`-Parameter sind das die Optionen, die Nutzern angezeigt werden. Wenn „options“ beispielsweise `{"js": "JavaScript", ...}` ist, wird „JavaScript“ als Option angezeigt. Wenn diese Option ausgewählt wird, ist der Wert dieses Parameters `js`.
Standard	`string` oder `boolean`	Legt den Anfangswert in der Benutzeroberfläche fest. Für `enum`-Parameter muss dies einer der Schlüssel in `options` sein. Für `boolean`-Parameter sollte dies entweder `true` oder `false` sein.
erforderlich	`boolean`	Gibt an, dass dieser Parameter erforderlich ist.

Parameterwerte in `idx-template.nix` verwenden

Nachdem Sie das params-Objekt in Ihrer idx-template.json-Datei definiert haben, können Sie das Bootstrap-Skript basierend auf den vom Nutzer ausgewählten Parameterwerten anpassen.

Wenn Sie dem Beispiel im vorherigen Abschnitt folgen und einen einzelnen Parameter mit der ID language haben, der ein Enum mit den möglichen Werten ts oder js ist, können Sie ihn so verwenden:

# idx-template.nix
# Accept additional arguments to this template corresponding to template
# parameter IDs, including default values (language=ts by default in this example).
{ pkgs, language ? "ts", ... }: {
  packages = [
    pkgs.nodejs
  ];

  bootstrap = ''
    # We use Nix string interpolation to pass the user's chosen programming
    # language to our script.
    npm init --yes my-boot-strap@latest "$out" -- --lang=${language}
  ''
}

Ein weiteres häufiges Muster besteht darin, Inhalte abhängig vom Wert eines Strings bedingt einzufügen. Das vorherige Beispiel lässt sich auch so schreiben:

npm init --yes my-boot-strap@latest "$out" -- \
    ${if language == "ts" then "--lang=ts" else "--lang=js" }

Auswählen, welche Dateien standardmäßig geöffnet werden sollen

Es empfiehlt sich, anzupassen, welche Dateien zum Bearbeiten geöffnet werden sollen, wenn neue Arbeitsbereiche mit Ihrer Vorlage erstellt werden. Wenn Ihre Vorlage beispielsweise für eine einfache Website ist, sollten Sie die wichtigsten HTML-, JavaScript- und CSS-Dateien öffnen.

Wenn Sie anpassen möchten, welche Dateien standardmäßig geöffnet werden sollen, aktualisieren Sie Ihre .idx/dev.nix-Datei (nicht Ihre idx-template.nix-Datei) mit einem onCreate-Workspace-Hook mit einem openFiles-Attribut, wie hier gezeigt:

# .idx/dev.nix
{pkgs}: {
  ...
  idx = {
    # Workspace lifecycle hooks
    workspace = {
      # Runs when a workspace is first created with this `dev.nix` file
      onCreate = {
        # Open editors for the following files by default, if they exist.
        # The last file in the list will be focused.
        default.openFiles = [
          "src/index.css"
          "src/index.js"
          "src/index.html"
        ];
        # Include other scripts here, as needed, for example:
        # installDependencies = "npm install";
      };
      # To run something each time the workspace is (re)started, use the `onStart` hook
    };
    # Enable previews and customize configuration
    previews = { ... };
  };
}

Standardsymbol für Arbeitsbereich auswählen

Sie können das Standardsymbol für Arbeitsbereiche auswählen, die mit Ihrer Vorlage erstellt wurden. Dazu platzieren Sie eine PNG-Datei mit dem Namen icon.png neben der Datei dev.nix im Verzeichnis .idx.

Vorlage in einem neuen Arbeitsbereich testen

Am einfachsten testen Sie Ihre Vorlage, indem Sie damit einen neuen Arbeitsbereich erstellen. Rufen Sie den folgenden Link auf und ersetzen Sie das Beispiel durch die GitHub-Repository-URL Ihrer Vorlage:

https://idx.google.com/new?template=https://github.com/my-org/my-repo

Sie können optional einen Branch und einen Unterordner angeben. Alle folgenden Beispiele sind gültig, sofern sie öffentlich zugänglich sind:

https://github.com/my-org/my-repo/
https://github.com/my-org/my-repo/tree/main/path/to/myidxtemplate
https://github.com/my-org/my-repo/tree/branch
https://github.com/my-org/my-repo/tree/branch/path/to/myidxtemplate

Das ist auch die URL, die Sie für andere freigeben, damit sie Ihre neue Vorlage verwenden können, oder die URL, auf die Sie über die Schaltfläche In Firebase Studio öffnen verlinken.

Nachdem Sie bestätigt haben, dass sich Ihre Vorlage wie erwartet verhält, veröffentlichen Sie sie in einem GitHub-Repository und geben Sie denselben Link an, den Sie beim Erstellen eines Arbeitsbereichs zum Testen verwendet haben.

Damit Nutzer Ihre Vorlage noch einfacher finden, können Sie Ihrer Website oder README-Datei Ihres Repositorys die Schaltfläche In Firebase Studio öffnen hinzufügen.