App als Vorschau

Firebase Studio bietet verschiedene Möglichkeiten, Ihre Anwendung während der Entwicklung in der Vorschau anzusehen und zu testen. Dazu gehört die Verwendung von App Prototyping agent sowie der integrierten Web-Vorschau und der Web- und Android-Vorschau, die in Firebase Studio-Arbeitsbereichen verfügbar sind.

Vorabversion aktivieren und konfigurieren

Wenn Sie eine Vorlage verwenden oder Ihre App mit dem App Prototyping agent generieren, sind Vorschauen oft bereits für Sie konfiguriert. Wenn in Ihrer Vorlage noch keine Vorschauen eingerichtet sind, können Sie sie in der Nix-Konfigurationsdatei des Projekts konfigurieren.

Öffnen Sie .idx/dev.nix in Ihrem Arbeitsbereich.

Firebase Studio generiert diese Datei automatisch, wenn Sie einen neuen Arbeitsbereich erstellen. Sie enthält alle anwendbaren Vorschauumgebungen basierend auf der von Ihnen ausgewählten Vorlage. Wenn sich die Datei nicht in Ihrem Firebase Studio-Code-Repository befindet, erstellen Sie sie und legen Sie das Attribut idx.previews auf true fest. Fügen Sie dann Konfigurationsattribute hinzu, wie im folgenden Beispiel gezeigt:

{ pkgs, ... }: {

  # NOTE: This is an excerpt of a complete Nix configuration example.
  # For more information about the dev.nix file in Firebase Studio, see
  # https://firebase.google.com/docs/studio/customize-workspace

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      # The following object sets web 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";
      };
      # The following object sets Android previews
      # Note that this is supported only on Flutter workspaces
      android = {
        manager = "flutter";
      };
    };
  };
}

Eine vollständige Liste der Nix-Attribute in Firebase Studio finden Sie unter Nix + Firebase Studio.

Umgebung neu erstellen:
- Führen Sie in der Befehlspalette (Cmd+Shift+P/Ctrl+Shift+P) den Befehl Firebase Studio: Hard restart aus.
- Klicken Sie in der Benachrichtigung Umgebungskonfiguration aktualisiert auf Umgebung neu erstellen.
Wenn Sie die Umgebung nach dem Ändern der Datei dev.nix neu erstellen, wird im Arbeitsbereich der Vorschaubereich mit den Tabs Android und/oder Web angezeigt, je nachdem, was Sie aktiviert haben.

App-Vorschauen verwenden

Firebase Studio bietet Webvorschauen in Chrome- und Android-Emulatoren in Flutter-Arbeitsbereichen, in denen Ihre App in der Vorschauumgebung installiert wird. So können Sie Ihre App direkt in Ihrem Arbeitsbereich vollständig testen.

Vorschauen für Web und Android aktualisieren

Firebase Studio nutzt die Hot-Reload-Funktionen der zugrunde liegenden Frameworks (wie npm run start und flutter hot-reload), um Ihnen einen optimierten inneren Entwicklungszyklus zu ermöglichen. Firebase Studio bietet die folgenden Arten von Reloads:

Automatisches Hot Reload: Hot Reloads werden automatisch ausgeführt, wenn Sie eine Datei speichern. Ein Hot-Reload, manchmal auch Hot Module Replacement (HMR) genannt, aktualisiert Ihre App, ohne dass die Seite neu geladen (bei Web-Apps) oder die App neu gestartet oder neu installiert (bei Emulatoren) werden muss. Dieser Ansatz ist nützlich, um den Live-Status Ihrer App beizubehalten, funktioniert aber möglicherweise nicht immer wie vorgesehen.
Manual Full Reload (Manuelles vollständiges Neuladen): Diese Option entspricht dem Aktualisieren einer Seite (für Web-Apps) oder dem Neustarten einer App (für Emulatoren). Wir empfehlen, einen vollständigen Reload zu verwenden, um wichtige Änderungen an Ihrem Quellcode zu erfassen, z. B. wenn Sie große Teile des Codes refaktorieren.
Manueller Kaltstart: Bei dieser Option wird das Vorschausystem von Firebase Studio vollständig neu gestartet. Dazu gehört auch das Beenden und Neustarten des Webservers Ihrer App.

Alle Optionen zum Neuladen sind entweder über die Vorschau-Symbolleiste oder über die Befehlspalette (Cmd+Shift+P auf dem Mac oder Ctrl+Shift+P unter ChromeOS, Windows oder Linux) in der Kategorie Firebase Studio verfügbar.

So verwenden Sie die Vorschau-Symbolleiste:

Klicken Sie auf das Symbol Neu laden, um die Seite zu aktualisieren. Dadurch wird ein vollständiges Neuladen erzwungen. Wenn Sie eine andere Art der Aktualisierung wünschen, klicken Sie auf den Pfeil neben dem Aktualisierungssymbol, um das Menü zu maximieren.
Wählen Sie im Menü die gewünschte Aktualisierungsoption aus: Hot Reload, Full Reload oder Hard Restart.

Sie können die Webvorschau Ihrer App für andere Nutzer freigeben, damit diese Feedback geben können. Aktivieren Sie dazu den Zugriff und teilen Sie dann den direkten Link zur Vorschau:

Klicken Sie in der Symbolleiste der Webvorschau rechts neben der Adressleiste auf das Symbol Vorschau-Link teilen, um das Freigabemenü zu öffnen.
Sie haben folgende Möglichkeiten, anderen den Zugriff auf Ihren Arbeitsbereich zu erlauben:
- Vorschau öffentlich machen: Machen Sie die Vorschau Ihres Arbeitsbereichs öffentlich zugänglich. So kann jeder im Internet auf den Vorschauserver zugreifen, der in Ihrem Arbeitsbereich ausgeführt wird, solange Ihr Arbeitsbereich aktiv ist und bis Sie den öffentlichen Zugriff deaktivieren.
- Zugriff auf Arbeitsbereich verwalten Geben Sie Ihren Arbeitsbereich nur für die Personen frei, denen Sie Zugriff gewähren möchten.
  
  Warnung :Wenn Sie Ihren Arbeitsbereich freigeben, können andere Nutzer Änderungen an Ihrem Code vornehmen und auf andere private Informationen wie Authentifizierungstokens zugreifen, die im Arbeitsbereich gespeichert sind. Geben Sie Ihren Arbeitsbereich daher nur für Personen frei, denen Sie vertrauen. Weitere Informationen
Wählen Sie Vorschau-URL kopieren aus, um einen direkten Link zur Arbeitsbereichsvorschau zu kopieren. Diesen können Sie dann an Personen senden, von denen Sie Feedback erhalten möchten. Sie können auch den angezeigten QR‑Code verwenden, um die Vorschau auf Ihrem Mobilgerät zu öffnen.

Automatisches Speichern und Hot Reload konfigurieren

Standardmäßig wird Ihre Arbeit in Firebase Studio eine Sekunde nach dem Beenden der Eingabe automatisch gespeichert, wodurch automatische Hot-Reloads ausgelöst werden. Wenn Sie möchten, dass Firebase Studio Ihre Arbeit in einem anderen Intervall speichert, ändern Sie die Einstellung für das automatische Speichern. Sie können das automatische Speichern auch deaktivieren.

Automatisches Speichern konfigurieren

Öffnen Sie Firebase Studio.
Klicken Sie auf Settings (Einstellungen).
Suchen Sie nach Files: Auto Save und prüfen Sie, ob das Feld auf „afterDelay“ gesetzt ist.
Suchen Sie nach Dateien: Automatisches Speichern – Verzögerung.
Geben Sie ein neues Intervall für die automatische Speicherung in Millisekunden ein. Änderungen an Ihrer Arbeit werden jetzt automatisch auf Grundlage der neuen Einstellung für die automatische Speicherung gespeichert.

Automatisches Speichern deaktivieren

Öffnen Sie Firebase Studio.
Klicken Sie auf Settings (Einstellungen).
Suchen Sie nach Dateien: Automatisches Speichern.
Klicken Sie auf das Drop-down-Menü und wählen Sie Aus aus.

Verbindung zum Backend der Vorschau getrennt

Sie können die Meldung „Preview backend disconnected“ (Vorschaueinrichtung getrennt) ignorieren.