App als Vorschau

Mit Project IDX können Sie eine Vorschau Ihrer Arbeit ansehen, indem Sie eine Liveansicht Ihrer Anwendung zusammen mit Ihrem Codeeditor 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 der Anwendung in Ihrem Arbeitsbereich sehen 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 in der Befehlspalette den Befehl Projekt IDX: Harter Neustart aus (Cmd + Umschalt + P/Strg + Umschalt + P).
    • Klicken Sie in der Benachrichtigung Umgebungskonfiguration aktualisiert auf Umgebung neu erstellen.

    Wenn Sie die Umgebung neu erstellen, nachdem Sie die Datei dev.nix geändert haben, 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 wieder.

App-Vorschauen verwenden

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

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 Neuladevorgängen beschrieben, die Ihnen bei der Fehlerbehebung helfen, wenn das Standardverhalten auf IDX für Ihren Anwendungsfall nicht gut funktioniert.

  • Automatischer Hot Reload: Hot Reloads werden automatisch ausgeführt, wenn Sie eine Datei speichern. Dieser Vorgang wird auch als Hot Module Replacement (oder HMR) bezeichnet. Bei einem Hot Refresh wird Ihre App aktualisiert, ohne dass die Seite neu geladen werden muss (bei Webanwendungen) oder ohne Neustart oder Neuinstallation der App (bei Emulatoren). Dieser Ansatz eignet sich hervorragend für die Beibehaltung des Live-Status Ihrer Anwendung, funktioniert jedoch 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 Aktualisierung, um wesentliche Änderungen an Ihrem Quellcode zu erfassen, z. B. beim Refaktorieren 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 eine vollständige Aktualisierung erzwungen. Klicken Sie für einen anderen Aktualisierungstyp auf den Pfeil neben dem Aktualisierungssymbol, um das Menü zu maximieren.

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

    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. Dazu müssen Sie den Zugriff aktivieren und dann den direkten Link zur Vorschau teilen:

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

    Vorschau des Menüs „Teilen“

  2. Erlauben Sie anderen Nutzern den Zugriff auf Ihren Arbeitsbereich. Dazu haben Sie folgende Möglichkeiten:

    • Option A: Sie können die Vorschau Ihres Arbeitsbereichs öffentlich zugänglich machen, indem Sie Vorschau öffentlich machen auswählen. So kann jeder im Internet den Vorschauserver Ihres Arbeitsbereichs erreichen, während der Arbeitsbereich aktiv ist und 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 Refresh konfigurieren

Standardmäßig speichert IDX Ihre Arbeit eine Sekunde, nachdem Sie die Eingabe beendet haben, automatisch, wodurch automatische Hot Refreshs ausgelöst werden. 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.

Automatisches Speichern konfigurieren

  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 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: Automatisch speichern.
  4. Klicken Sie auf das Drop-down-Menü und wählen Sie Aus aus. Das automatische Speichern ist jetzt deaktiviert.