App als Vorschau

Mit Project IDX können Sie sich eine Vorschau Ihrer Arbeit ansehen, indem Sie neben dem Code-Editor eine Liveansicht Ihrer Anwendung rendern. IDX-Webvorschauen rendern einen Inline-Frame (iFrame) des Webservers der App und einen cloudbasierten Android-Emulator.

Vorabversion aktivieren und konfigurieren

Wenn Sie eine Vorschau Ihrer App in Ihrem Arbeitsbereich anzeigen möchten, müssen Sie die Vorschauumgebung konfigurieren.

  1. Aktivieren Sie in Ihrer .idx/dev.nix-Konfigurationsdatei die Vorschau. IDX generiert diese Datei automatisch, wenn Sie einen neuen Arbeitsbereich erstellen. Sie enthält alle relevanten Vorschauumgebungen, die auf der von Ihnen ausgewählten Vorlage basieren. Wenn die Datei nicht in Ihrem IDX-Code-Repository vorhanden ist, 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";
        # 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 IDX finden Sie unter Nix + IDX.

  2. Wiederherstellen der Umgebung:

    • Führen Sie den Befehl Project IDX: Hard restart (Projekt-IDX: Hard-Neustart) über die Befehlspalette aus (Befehlstaste + Umschalttaste + P/Strg + Umschalttaste + P).
    • 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 in Ihrem Arbeitsbereich das Vorschaufeld mit den Tabs Android und Web angezeigt, je nachdem, was Sie aktiviert haben. Es kann jedoch einige Zeit dauern, bis die Umgebung neu erstellt wurde. Schließen Sie den Arbeitsbereich und öffnen Sie ihn dann über das IDX-Dashboard wieder.

App-Vorschauen verwenden

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

Vorschauen für Web und Android aktualisieren

IDX nutzt die Hot-Reload-Funktionen der zugrunde liegenden Frameworks (z. B. npm run start und flutter hot-reload), um einen engen internen Entwicklungszyklus zu ermöglichen. In diesem Abschnitt werden die verschiedenen Arten von Aktualisierungen beschrieben, damit Sie Fehler beheben können, wenn das Standardverhalten von IDX für Ihren Anwendungsfall nicht geeignet ist.

  • 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 eignet sich hervorragend, um den Live-Status Ihrer App beizubehalten, funktioniert aber manchmal nicht 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, eine vollständige Neuauslieferung durchzuführen, um erhebliche Änderungen am Quellcode zu erfassen, z. B. beim Refactoring großer Codeblöcke.

  • Manueller Hard-Reset: Mit dieser Option wird das Vorschausystem von IDX vollständig neu gestartet. Dazu wird 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 (Befehlstaste + Umschalttaste + P auf dem Mac oder Strg + Umschalttaste + P unter ChromeOS, Windows oder 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ä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.

    Die Symbolleiste für die Vorschau befindet sich oben im Vorschaubereich.

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 frei:

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

    Vorschau des Menüs „Teilen“

  2. Sie haben folgende Möglichkeiten, anderen Zugriff auf Ihren Arbeitsbereich zu gewähren:

    • Option A: Sie können die Vorschau Ihres Arbeitsbereichs öffentlich zugänglich machen, indem Sie Vorschau öffentlich zugänglich machen auswählen. So kann jeder im Internet solange, wie Ihr Arbeitsbereich aktiv ist, auf den laufenden Vorschauserver Ihres Arbeitsbereichs zugreifen, bis Sie den öffentlichen Zugriff deaktivieren.

    • Option B Wählen Sie Workspace-Zugriff verwalten aus, um Ihren Arbeitsbereich nur für die Nutzer freizugeben, 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.

Automatisches Speichern und Hot Reload konfigurieren

Standardmäßig speichert IDX Ihre Arbeit eine Sekunde, nachdem Sie aufgehört haben zu tippen, und löst automatische Hot-Reloads aus. Wenn Sie möchten, dass IDX Ihre Arbeit in einem anderen Intervall speichert, ändern Sie die Einstellung für die automatische Speicherung. Sie können die Funktion „Automatisch speichern“ auch deaktivieren.

  1. Öffnen Sie Project IDX.
  2. Klicken Sie auf Settings (Einstellungen). Das Fenster „Einstellungen“ wird angezeigt.
  3. Suchen Sie nach Dateien: Automatisch speichern und prüfen Sie, ob das Feld auf „afterDelay“ gesetzt ist.
  4. Suchen Sie nach Dateien: Verzögerung beim automatischen Speichern. Das Feld „Verzögerung beim automatischen Speichern“ wird angezeigt.
  5. Geben Sie ein neues Intervall für die automatische Speicherung in Millisekunden ein. Änderungen an Ihren Inhalten werden jetzt automatisch gemäß der neuen Einstellung für die automatische Speicherverzögerung gespeichert.
  1. Öffnen Sie Project IDX.
  2. Klicken Sie auf Settings (Einstellungen). Das Fenster „Einstellungen“ wird angezeigt.
  3. Suchen Sie nach Dateien: Automatisch speichern.
  4. Klicken Sie auf das Drop-down-Menü und wählen Sie Aus aus.