Firebase Studio-Arbeitsbereich anpassen

Mit Firebase Studio können Sie Ihren Arbeitsbereich an die individuellen Anforderungen Ihres Projekts anpassen. Dazu definieren Sie eine einzelne .idx/dev.nix-Konfigurationsdatei, 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 erforderlichen Erweiterungen (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. Im Detail verwendet Firebase Studio:

  • Die Nix-Programmiersprache zum Beschreiben von Arbeitsumgebungen. 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 zum Verwalten der für Ihren Arbeitsbereich verfügbaren Systemtools. Das ist vergleichbar mit betriebssystemspezifischen Paketmanagern wie APT (apt und apt-get), Homebrew (brew) und dpkg.

Da Nix-Umgebungen reproduzierbar und deklarativ sind, bedeutet das im Kontext von Firebase Studio, dass Sie Ihre Nix-Konfigurationsdatei als Teil Ihres Git-Repositories freigeben können, damit alle, die an Ihrem Projekt arbeiten, dieselbe Umgebungskonfiguration haben.

Einfaches Beispiel

Das folgende Beispiel zeigt eine grundlegende Umgebungskonfiguration, mit der Vorschauen aktiviert werden:

{ 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";
      };
    };
  };
}

Systemtools hinzufügen

Wenn Sie Ihrem Arbeitsbereich Systemtools hinzufügen möchten, z. B. Compiler oder Befehlszeilenprogramme für Cloud-Dienste, finden Sie die eindeutige Paket-ID in der Nix-Paketregistrierung und fügen Sie sie dem packages-Objekt Ihrer dev.nix-Datei mit dem Präfix „pkgs.“ hinzu:

{ 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 Installation von Systempaketen mithilfe von betriebssystemspezifischen Paketmanagern wie APT (apt und apt-get), Homebrew (brew) und dpkg. Wenn Sie deklarativ genau angeben, welche Systempakete erforderlich sind, können Firebase Studio-Arbeitsbereiche leichter geteilt und reproduziert werden.

Lokale Knoten-Binärdateien verwenden

Genau wie auf Ihrem lokalen Computer können Binärdateien, die mit lokal installierten Node-Paketen verknüpft sind (z. B. in package.json definierte Pakete), in einem Terminalbereich ausgeführt werden, indem Sie sie mit dem Befehl npx 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 der 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 haben zwei Möglichkeiten, Erweiterungen in Firebase Studio über die Erweiterungsregistrierung OpenVSX 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, z. B.:

    • Benutzerdefinierte Farbdesigns
    • Editor-Emulation, z. B. VSCodeVim

  • Fügen Sie Ihrer dev.nix-Datei 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.:

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

Bei der zweiten Methode können Sie IDE-Erweiterungen in Ihre dev.nix-Datei aufnehmen. Suchen Sie dazu die voll qualifizierte Erweiterungs-ID (vom Typ <publisher>.<id>) und fügen Sie sie dem idx.extensions-Objekt so hinzu:

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

Gängige Dienstleistungen hinzufügen

Firebase Studio bietet außerdem eine vereinfachte Einrichtung und Konfiguration gängiger Dienste, die Sie während der Entwicklung benötigen könnten, 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 erstellen.

Symbol für den Arbeitsbereich 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 die Datei dev.nix platzieren. Firebase Studio verwendet dann dieses Symbol, um Ihren Arbeitsbereich in Ihrem Dashboard darzustellen.

Da diese Datei in die Versionskontrolle (z. B. Git) eingecheckt werden kann, ist dies eine gute Möglichkeit, allen, die an Ihrem Projekt arbeiten, dasselbe Symbol für Ihr Projekt zu zeigen, wenn sie Firebase Studio verwenden. Da die Datei je nach Git-Branch variieren kann, können Sie dieses Symbol verwenden, um visuell zwischen Beta- und Produktions-App-Arbeitsbereichen und für andere Zwecke zu unterscheiden.

Anpassungen in eine Vorlage umwandeln

Wenn Sie Ihre Umgebungskonfiguration in eine „Starter-Umgebung“ umwandeln möchten, die jeder zum Erstellen neuer Projekte verwenden kann, lesen Sie die Informationen unter Benutzerdefinierte Vorlagen erstellen.

Alle Personalisierungsoptionen ansehen

Eine ausführliche 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 Explorer-Bereich mit der rechten Maustaste auf ein beliebiges Verzeichnis und wählen Sie Zip und herunterladen aus.

So laden Sie alles 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 das 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 der Projektname.

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

  5. Öffnen Sie nach Abschluss des Downloads Ihr Arbeitsverzeichnis über das Menü Datei, um zu Ihrem Arbeitsbereich zurückzukehren.

Nächste Schritte