Diese Seite wurde von der Cloud Translation API übersetzt.

Firebase Studio-Arbeitsbereich anpassen

Mit Firebase Studio können Sie Ihren Arbeitsbereich an die individuellen Anforderungen Ihres Projekts anpassen, indem Sie eine einzelne .idx/dev.nix-Konfigurationsdatei definieren, die Folgendes beschreibt:

Die Systemtools, die Sie ausführen können müssen (z. B. über das Terminal), z. B. Compiler oder andere Binärdateien.
Die Erweiterungen, die Sie installiert haben müssen (z. B. Unterstützung für Programmiersprachen).
Wie Ihre App-Vorschauen angezeigt werden sollen (z. B. die Befehle zum Ausführen Ihres Webservers).
Globale Umgebungsvariablen, die für lokale Server verfügbar sind, die in Ihrem Arbeitsbereich ausgeführt werden.

Eine vollständige Beschreibung der verfügbaren Optionen finden Sie in der dev.nix-Referenz.

Nix und Firebase Studio

Firebase Studio verwendet Nix, um die Umgebungskonfiguration für jeden Arbeitsbereich zu definieren. Konkret verwendet Firebase Studio:

Die Programmiersprache Nix zum Beschreiben von Arbeitsbereichsumgebungen. Nix ist eine funktionale Programmiersprache. Die Attribute und Paketbibliotheken, die Sie in der Datei dev.nix definieren können, folgen der Syntax für Nix-Attributsätze.
Der Nix-Paketmanager, um die für Ihren Arbeitsbereich verfügbaren Systemtools zu verwalten. Dies ähnelt betriebssystemspezifischen Paketmanagern wie APT (apt und apt-get), Homebrew (brew) und dpkg.

Da Nix-Umgebungen reproduzierbar und deklarativ sind, können Sie im Kontext von Firebase Studio Ihre Nix-Konfigurationsdatei als Teil Ihres Git-Repositorys freigeben, um sicherzustellen, dass jeder, der an Ihrem Projekt arbeitet, dieselbe Umgebungskonfiguration hat.

Einfaches Beispiel

Das folgende Beispiel zeigt eine einfache Umgebungskonfiguration, die Vorschauen ermöglicht:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

System-Tools hinzufügen

Wenn Sie Ihrem Arbeitsbereich Systemtools wie Compiler oder CLI-Programme für Cloud-Dienste hinzufügen möchten, suchen Sie in der Nix-Paketregistrierung nach der eindeutigen Paket-ID und fügen Sie sie dem packages-Objekt Ihrer dev.nix-Datei hinzu. Stellen Sie dabei `pkgs.:` voran.

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

Das unterscheidet sich von der üblichen Installation von Systempaketen mit betriebssystemspezifischen Paketmanagern wie APT (apt und apt-get), Homebrew (brew) und dpkg. Wenn Sie deklarativ beschreiben, welche Systempakete genau benötigt werden, lassen sich Firebase Studio-Arbeitsbereiche einfacher teilen und reproduzieren.

Lokale Knotenbinärdateien verwenden

Genau wie auf Ihrem lokalen Computer können Binärdateien, die sich auf lokal installierte Knotenpakete beziehen (z. B. Pakete, die in Ihrer package.json definiert sind), in einem Terminalfenster ausgeführt werden, indem Sie sie mit dem npx-Befehl aufrufen.

Wenn Sie sich in einem Verzeichnis mit einem node_modules-Ordner befinden (z. B. im Stammverzeichnis eines Webprojekts), können lokal installierte Binärdateien direkt ohne das Präfix npx aufgerufen werden.

`gcloud`-Komponenten hinzufügen

Eine Standardkonfiguration der gcloud-CLI für Google Cloud ist für alle Firebase Studio-Arbeitsbereiche verfügbar.

Wenn Sie zusätzliche Komponenten benötigen, können Sie sie in Ihre dev.nix-Datei einfügen:

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

IDE-Erweiterungen hinzufügen

Sie haben zwei Möglichkeiten, Erweiterungen in Firebase Studio über die OpenVSX-Erweiterungsregistrierung zu installieren:

Im Bereich Erweiterungen in Firebase Studio können Sie Erweiterungen finden und installieren. Dieser Ansatz eignet sich am besten für nutzerspezifische Erweiterungen wie:
- Benutzerdefinierte Farbschemas
- Editor-Emulation, z. B. VSCodeVim
Fügen Sie Ihrer Datei dev.nix Erweiterungen hinzu. Diese Erweiterungen werden automatisch installiert, wenn Sie die Konfiguration Ihres Arbeitsbereichs freigeben. Dieser Ansatz eignet sich am besten für projektspezifische Erweiterungen, z. B.:
- Erweiterungen für Programmiersprachen, einschließlich sprachspezifischer Debugger
- Offizielle Erweiterungen für Cloud-Dienste, die in Ihrem Projekt verwendet werden
- Code-Formatierer

Bei der zweiten Methode können Sie IDE-Erweiterungen in Ihre dev.nix-Datei einfügen. Suchen Sie dazu die vollständig qualifizierte Erweiterungs-ID (im Format <publisher>.<id>) und fügen Sie sie dem idx.extensions-Objekt hinzu:

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

Allgemeine Dienste hinzufügen

Firebase Studio bietet außerdem eine vereinfachte Einrichtung und Konfiguration für gängige Dienste, die Sie während der Entwicklung benötigen, darunter:

Container
- Docker (services.docker.*)
Messaging
- Pub/Sub-Emulator (services.pubsub.*)
Datenbanken
- MySQL (services.mysql.*)
- Postgres (services.postgres.*)
- Redis (services.redis.*)
- Spanner (services.spanner.*)

Weitere Informationen zum Aktivieren dieser Dienste in Ihrem Arbeitsbereich finden Sie in den services.*-Abschnitten der dev.nix-Referenz.

Vorschauen anpassen

Weitere Informationen zum Anpassen von App-Vorschauen finden Sie unter App-Vorschau.

Symbol für Arbeitsbereich festlegen

Sie können ein benutzerdefiniertes Symbol für Ihren Arbeitsbereich auswählen, indem Sie eine PNG-Datei mit dem Namen icon.png in das Verzeichnis .idx auf derselben Ebene wie Ihre dev.nix-Datei einfügen. Firebase Studio verwendet dieses Symbol dann, um Ihren Arbeitsbereich in Ihrem Dashboard darzustellen.

Da diese Datei in die Quellcodeverwaltung (z. B. Git) eingecheckt werden kann, ist dies eine gute Möglichkeit, dafür zu sorgen, dass alle, die an Ihrem Projekt arbeiten, dasselbe Symbol für Ihr Projekt sehen, wenn sie Firebase Studio verwenden. Da sich die Datei je nach Git-Branch unterscheiden kann, können Sie dieses Symbol verwenden, um Beta- und Produktions-App-Arbeitsbereiche und andere Elemente visuell zu unterscheiden.

Anpassungen in eine Vorlage umwandeln

Informationen dazu, wie Sie Ihre Umgebungskonfiguration in eine „Starter-Umgebung“ umwandeln, die jeder zum Erstellen neuer Projekte verwenden kann, finden Sie in der Dokumentation unter Benutzerdefinierte Vorlagen erstellen.

Alle Anpassungsoptionen ansehen

Eine detaillierte Beschreibung des Schemas für die Umgebungskonfiguration finden Sie in der dev.nix-Referenz.

Dateien herunterladen

So laden Sie Ihre Dateien als ZIP-Datei herunter:

Klicken Sie im Bereich „Explorer“ mit der rechten Maustaste auf ein beliebiges Verzeichnis und wählen Sie Zip and Download (Zippen und herunterladen) aus.

So laden Sie alle Inhalte in Ihrem Projektverzeichnis herunter:

Wählen Sie Datei > Ordner öffnen aus.
Übernehmen Sie das Standardverzeichnis /home/user.
Klicken Sie nach dem Laden der Dateien mit der rechten Maustaste auf Ihr Arbeitsverzeichnis und wählen Sie Zippen und herunterladen aus. Wenn Sie die App Prototyping agent verwenden, ist Ihr Arbeitsverzeichnis studio. Wenn Sie eine Vorlage oder ein hochgeladenes Projekt verwenden, ist dies Ihr Projektname.
Wenn Sie aufgefordert werden, die Umgebung neu zu erstellen, klicken Sie auf Abbrechen.
Wenn der Download abgeschlossen ist, öffnen Sie Ihr Arbeitsverzeichnis noch einmal über das Menü Datei, um zu Ihrem Arbeitsbereich zurückzukehren.