App als Vorschau ansehen

Mit Projekt IDX können Sie eine Vorschau Ihrer Arbeit ansehen, indem Sie eine Live-Ansicht Ihrer Anwendung zusammen mit Ihrem Code-Editor rendern. IDX-Webvorschauen rendern einen Inline-Frame (iFrame) des Webservers der App und einen cloudbasierten Android-Emulator.

Vorschauumgebung aktivieren und konfigurieren

Damit Sie die Anwendung im Arbeitsbereich als Vorschau ansehen können, müssen Sie die Vorschauumgebung konfigurieren.

  1. Aktivieren Sie die Vorschau in der Konfigurationsdatei .idx/dev.nix. IDX generiert diese Datei automatisch, wenn Sie einen neuen Arbeitsbereich erstellen. Sie enthält auch alle anwendbaren Vorschauumgebungen, die auf der ausgewählten Vorlage basieren. Wenn sich die Datei nicht in Ihrem IDX-Code-Repository befindet, erstellen Sie sie. Legen Sie das Attribut idx.previews auf true fest und fügen Sie 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 IDX, see
# https://developers.google.com/idx/guides/customize-idx-env

# 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";
    };
    # 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 IDX finden Sie unter Nix + IDX.

  2. Erstellen Sie Ihre Umgebung neu:

    • Führen Sie in der Befehlspalette den Befehl Projekt-IDX: Fester Neustart aus (Cmd + Umschalt + P/Strg + Umschalttaste + P).
    • 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 in Ihrem Arbeitsbereich der Vorschaubereich mit den Tabs Android und Web angezeigt, je nachdem, was Sie aktiviert haben. Es kann jedoch eine Weile dauern, bis die Umgebung neu erstellt wird. Schließen Sie den Arbeitsbereich und öffnen Sie ihn dann über das IDX-Dashboard noch einmal.

App-Vorschau verwenden

IDX bietet Webvorschauen für Chrome und Android-Emulatoren (in Flutter-Arbeitsbereichen). Damit wird Ihre App in der Vorschauumgebung installiert, sodass Sie sie vollständig und von Anfang bis Ende direkt von Ihrem Arbeitsbereich aus testen können.

Vorschauen für Web und Android aktualisieren

IDX bindet die Hot-Refresh-Funktionen der zugrunde liegenden Frameworks (z. B. npm run start und flutter hot-reload) ein, um Ihnen eine enge innere Entwicklungsschleife zu bieten. In diesem Abschnitt werden die verschiedenen Arten von Aktualisierungsvorgängen beschrieben, damit Sie herausfinden können, ob das Standardverhalten unter IDX für Ihren Anwendungsfall nicht gut funktioniert.

  • Automatisches Hot Refresh: Beim Speichern einer Datei werden automatisch Hot-Updates durchgeführt. Manchmal wird dies auch als Hot Module Replacement (HMR) bezeichnet. Bei diesem Vorgang wird Ihre App aktualisiert, ohne dass die Seite neu geladen wird (bei Web-Apps) oder ohne die App neu zu starten oder neu zu installieren (bei Emulatoren). Dieser Ansatz eignet sich hervorragend zum Beibehalten des Livestatus Ihrer Anwendung, kann aber manchmal nicht wie gewünscht funktionieren.

  • Manuelles vollständiges Aktualisieren: Diese Option entspricht einer Seitenaktualisierung (bei Web-Apps) oder einem App-Neustart (bei Emulatoren). Wir empfehlen eine vollständige Aktualisierung, um wesentliche Änderungen an Ihrem Quellcode zu erfassen, z. B. bei der Refaktorierung großer Codeblöcke.

  • Manueller harter Neustart: Mit dieser Option wird ein vollständiger Neustart des IDX-Vorschausystems durchgeführt, einschließlich des Beendens und Neustarts des Webservers Ihrer Anwendung.

Alle Optionen zum Aktualisieren sind über die Vorschausymbolleiste oder die Befehlspalette (Cmd + Umschalt + P auf einem Mac oder Strg + Umschalttaste + P unter ChromeOS, Windows und Linux) in der Kategorie IDX verfügbar.

So verwenden Sie die Vorschausymbolleiste:

  1. Klicken Sie auf das Symbol Aktualisieren, um die Seite zu aktualisieren. Dadurch wird ein vollständiges Aktualisieren erzwungen. Klicken Sie für eine andere Aktualisierungsart auf den Pfeil neben dem Symbol zum Aktualisieren, um das Menü zu maximieren.

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

    Die Vorschausymbolleiste befindet sich oben im Vorschaubereich.

Automatisches Speichern und Hot Refresh konfigurieren

Standardmäßig speichert IDX Ihre Arbeit automatisch eine Sekunde, nachdem Sie die Eingabe beendet haben, und löst automatische Hot-Neuladevorgänge aus. Wenn IDX Ihre Arbeit in einem anderen Intervall speichern soll, ändern Sie die Einstellung für die automatische Speicherung. Sie können das automatische Speichern auch deaktivieren.

Automatisches Speichern konfigurieren

  1. Öffnen Sie „Project IDX“.
  2. Klicken Sie auf Settings (Einstellungen). Das Fenster „Einstellungen“ wird angezeigt.
  3. Suchen Sie nach Files: Auto Save und prüfen Sie, ob das Feld auf „afterDelay“ gesetzt ist.
  4. Suchen Sie nach Files: Auto Save Delay (Dateien: Verzögerung automatisch speichern). Das Feld „Verzögerung beim automatischen Speichern“ wird angezeigt.
  5. Geben Sie ein neues Verzögerungsintervall für das automatische Speichern in Millisekunden ein. Änderungen an Ihrer Arbeit werden jetzt basierend auf der neuen Einstellung für die Verzögerung für das automatische Speichern automatisch gespeichert.

Automatisches Speichern deaktivieren

  1. Öffnen Sie „Project IDX“.
  2. Klicken Sie auf Settings (Einstellungen). Das Fenster „Einstellungen“ wird angezeigt.
  3. Suchen Sie nach Dateien: Automatische Speicherung.
  4. Klicken Sie auf das Drop-down-Menü und wählen Sie Aus aus. Das automatische Speichern ist jetzt deaktiviert.