App als Vorschau

Firebase Studio bietet einen Vorschaubereich, in dem neben dem Code-Editor eine Liveansicht Ihrer Anwendung gerendert wird.

Vorabversion aktivieren und konfigurieren

Wenn Sie eine Vorlage verwenden, sind Vorschauen oft bereits für Sie konfiguriert. Wenn in Ihrer Vorlage noch keine Vorschau eingerichtet ist, können Sie sie in der Nix-Konfigurationsdatei des Projekts konfigurieren.

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

   Firebase Studio generiert diese Datei automatisch, wenn Sie einen neuen Arbeitsbereich erstellen. Sie enthält alle relevanten Vorschauumgebungen, die auf der ausgewählten Vorlage basieren. Wenn die Datei nicht in Ihrem Firebase Studio-Code-Repository vorhanden ist, erstellen Sie sie und legen Sie dann 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.

2. Wiederherstellen der Umgebung:

   • Führen Sie in der Befehlspalette (Cmd+Shift+P/Ctrl+Shift+P) den Befehl Firebase Studio: Hard-Neustart aus.
   • Klicken Sie in der Benachrichtigung Umgebungskonfiguration aktualisiert auf Umgebung neu erstellen.

   Wenn Sie die Umgebung nach dem Ändern der dev.nix-Datei neu erstellen, wird der Vorschaubereich in Ihrem Arbeitsbereich angezeigt. Je nachdem, was Sie aktiviert haben, werden entweder der Tab Android oder der Tab Web oder beide angezeigt.

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 vollständig und End-to-End direkt in Ihrem Arbeitsbereich testen.

Vorschauen für Web und Android aktualisieren

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

• Automatischer Hot Reload: Hot Reloads werden automatisch ausgeführt, wenn Sie eine Datei speichern. Das Hot-Reloading wird auch als Hot Module Replacement (HMR) bezeichnet. Dabei wird Ihre App aktualisiert, ohne dass die Seite (bei Webanwendungen) oder die App (bei Emulatoren) neu geladen werden muss. Dieser Ansatz ist nützlich, um den Live-Status Ihrer App beizubehalten, funktioniert aber möglicherweise nicht immer wie vorgesehen.

• Manuelles vollständiges Neuladen: Diese Option entspricht dem Aktualisieren einer Seite (für Webanwendungen) oder dem Neustarten einer App (für Emulatoren). Wir empfehlen, bei größeren Änderungen am Quellcode ein vollständiges Neuladen durchzuführen, z. B. beim Refactoring großer Codeblöcke.

• Manueller Hard-Neustart: Mit dieser Option wird das Vorschausystem von Firebase Studio vollständig neu gestartet. Dazu wird auch der Webserver Ihrer App angehalten und neu gestartet.

Alle Optionen zum Aktualisieren sind entweder über die Symbolleiste für die Vorschau 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 Vorschausymbolleiste:

1. Klicken Sie auf das Symbol Aktualisieren, um die Seite zu aktualisieren. Dadurch wird ein vollständiger Neustart erzwungen. Wenn Sie eine andere Art der Aktualisierung ausführen möchten, klicken Sie auf den Pfeil neben dem Aktualisierungssymbol, um das Menü zu maximieren.

2. Wählen Sie im Menü die gewünschte Aktualisierungsoption aus: Hot Reload, Full Reload oder Hard Restart.

Webvorschau mit anderen teilen

Sie können die Webvorschau Ihrer App mit anderen teilen, um Feedback zu erhalten. Aktivieren Sie dazu den Zugriff und geben Sie dann den direkten Link zur Vorschau weiter:

1. Klicken Sie in der Symbolleiste der Webvorschau rechts neben der Adressleiste auf das Symbol  Link zur Vorschau teilen, um das Freigabemenü zu öffnen.

2. Sie haben folgende Möglichkeiten, anderen den Zugriff auf Ihren Arbeitsbereich zu erlauben:

   • Vorschau öffentlich zugänglich machen: Sie können die Vorschau Ihres Arbeitsbereichs öffentlich zugänglich machen. 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 den Arbeitsbereich verwalten Geben Sie Ihren Arbeitsbereich nur für die Personen frei, denen Sie Zugriff gewähren möchten.

3. Wählen Sie Vorschau-URL kopieren aus, um einen direkten Link zur Workspace-Vorschau zu kopieren, den Sie dann an Personen senden können, 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 speichert Firebase Studio Ihre Arbeit eine Sekunde, nachdem Sie aufgehört haben zu tippen, und löst automatische Hot-Reloads aus. Wenn Sie Ihre Arbeit in einem anderen Intervall speichern möchten, ändern Sie die Einstellung für die automatische Speicherung.Firebase Studio Sie können die Funktion „Automatisch speichern“ auch deaktivieren.

Nächste Schritte

• Mit Firebase veröffentlichen
• App überwachen