Firebase Studio-Arbeitsbereich anpassen

Firebase Studio ermöglicht es Ihnen, Ihren Arbeitsbereich an die individuellen Anforderungen Ihres Projekts anzupassen. Dazu definieren Sie eine einzelne Konfigurationsdatei vom Typ .idx/dev.nix, in der Folgendes beschrieben wird:

  • Die Systemtools, die Sie zum Ausführen benötigen (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. Insbesondere, Firebase Studio verwendet Folgendes:

  • Die Programmiersprache Nix um Arbeitsbereichsumgebungen zu beschreiben. Nix ist eine funktionale Programmiersprache. Die Attribute und Paketbibliotheken, die Sie in der dev.nix Datei definieren können, folgen der Syntax für Attributsätze von Nix.

  • Den 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, damit alle, die an Ihrem Projekt arbeiten, dieselbe Umgebungskonfiguration haben.

Einfaches Beispiel

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

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-24.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";
      };
    };
  };
}

Systemtools hinzufügen

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

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

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

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

Lokale Knotenbinärdateien verwenden

Wie auf Ihrem lokalen Computer können Binärdateien, die sich auf lokal installierte Knoten pakete beziehen (z. B. Pakete, die in Ihrer Datei 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 Ordner node_modules 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 Ihrer Datei dev.nix hinzufügen:

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

IDE-Erweiterungen hinzufügen

Sie können Erweiterungen in Firebase Studio auf zwei Arten über die OpenVSX Erweiterungsregistrierung installieren:

  • Verwenden Sie das Feld Erweiterungen in Firebase Studio, um Erweiterungen zu suchen und zu installieren. Dieser Ansatz eignet sich am besten für nutzerspezifische Erweiterungen wie:

    • Benutzerdefinierte Farbschemas
    • Editoremulation, z. B. VSCodeVim

  • Fügen Sie Ihrer Datei dev.nix Erweiterungen hinzu. Diese Erweiterungen werden automatisch installiert, wenn Sie Ihre Arbeitsbereichskonfiguration freigeben. Dieser Ansatz eignet sich am besten für projektspezifische Erweiterungen wie:

    • Erweiterungen für Programmiersprachen, einschließlich sprachspezifischer Debugger
    • Offizielle Erweiterungen für Cloud-Dienste, die in Ihrem Projekt verwendet werden
    • Codeformatierer

Für den zweiten Ansatz können Sie IDE-Erweiterungen in Ihre dev.nix Datei einfügen, indem Sie die voll qualifizierte Erweiterungs-ID (im Format <publisher>.<id>) suchen und sie so dem idx.extensions Objekt hinzufügen:

{ 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 auch eine vereinfachte Einrichtung und Konfiguration für allgemeine 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 Ihrer App-Vorschauen finden Sie unter Vorschau Ihrer App.

Arbeitsbereichssymbol festlegen

Sie können ein benutzerdefiniertes Symbol für Ihren Arbeitsbereich auswählen, indem Sie eine PNG-Datei mit dem Namen icon.png im Verzeichnis .idx auf derselben Ebene wie Ihre Datei dev.nix platzieren. 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 zwischen Git-Zweigen unterscheiden kann, können Sie dieses Symbol verwenden, um visuell zwischen Beta- und Produktions-App-Arbeitsbereichen zu unterscheiden und für andere Zwecke.

Anpassungen in eine Vorlage umwandeln

Informationen zum Umwandeln Ihrer Umgebungskonfiguration in eine "Starterumgebung", 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 für eine.

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 Zippen und herunterladen aus.

So laden Sie alle Dateien in Ihrem Projektverzeichnis herunter:

  1. Wählen Sie Datei > Ordner öffnen aus.

  2. Übernehmen Sie das Standardverzeichnis /home/user.

  3. Nachdem die Dateien geladen wurden, klicken Sie mit der rechten Maustaste auf Ihr Arbeitsverzeichnis und wählen Sie Zippen und herunterladen aus. Wenn Sie den App Prototyping agent verwenden, ist Ihr Arbeitsverzeichnis studio. Wenn Sie eine Vorlage oder ein hochgeladenes Projekt verwenden, ist dies Ihr Projektname.

  4. Wenn Sie aufgefordert werden, die Umgebung neu zu erstellen, klicken Sie auf Abbrechen.

  5. Nachdem der Download abgeschlossen ist, öffnen Sie Ihr Arbeitsverzeichnis über das Menü Datei wieder, um zu Ihrem Arbeitsbereich zurückzukehren.

Nächste Schritte