Wie die Vorschau einer laufenden App funktioniert

Der Tunnel zu localhost, die erlaubten Ports, benannte Ziele und was zu tun ist, wenn die Vorschau eine alte Version der Seite zeigt.

8 Minuten Aktualisiert 2026-09-13

Die Vorschau öffnet auf dem Handy die App, die auf deinem Rechner auf localhost läuft. Keine Kopie, kein Screenshot — genau diese laufende App. Der Agent ändert etwas, du tippst auf Neuladen und siehst es.

Wie die Daten dorthin kommen

Der Browser in der App spricht mit dem localhost des Handys, und der Server auf der anderen Seite öffnet eine TCP-Verbindung zu localhost:port bei sich. Dazwischen liegt derselbe verschlüsselte Kanal, über den alles andere geht.

Im Tunnel wird nichts umgeschrieben — weder Header noch Inhalt. Dadurch funktionieren auch WebSockets, sodass sich ein Dev-Server mit Hot Reload verhält wie am Rechner.

Es wird nichts irgendwohin veröffentlicht. Eine App auf localhost bleibt auf localhost; der Tunnel existiert nur, solange die Vorschau offen ist.

Erlaubte Ports

Der Server lässt nur Ports aus den erlaubten Bereichen durch. Standardmäßig sind das:

3000–3999, 4000–4999, 5173, 8000–8999

Dort passen die üblichen Dev-Server hinein, Datenbanken und SSH nicht. Ändern lässt sich das in der Konfiguration des Servers:

{
  "allowed_ports": [{ "from": 3000, "to": 3999 }, { "from": 9000, "to": 9000 }]
}

Ein Versuch auf einem Port außerhalb des Bereichs wird ins Protokoll des Servers geschrieben. Es ist die einzige Spur davon, dass das Handy irgendwohin wollte, wohin es nicht darf.

Benannte Ziele — und warum sie sich lohnen

In der Konfiguration des Servers lassen sich ganze Anwendungen benennen, also nicht ein Port, sondern eine Gruppe:

{
  "preview_targets": [
    { "name": "jobino", "port": 3000, "extra_ports": [8000] }
  ]
}

In der Vorschau erscheinen sie dann als Schaltfläche unter „Aus der Konfiguration des Servers“ und es öffnen sich alle ihre Ports auf einmal.

Das ist die häufigste Lösung eines Problems, das wie eine kaputte App aussieht: die Seite lädt, aber die Anmeldung oder das Laden der Daten scheitert. Das Frontend läuft auf 3000, die API auf 8000 — und wenn nur 3000 offen ist, führen Anfragen an die API vom Handy nirgendwohin. Ein benanntes Ziel öffnet beides.

Ein Ziel mit einem Port außerhalb der erlaubten Bereiche lehnt der Server schon beim Start ab. Ließe er es durch, würde die Vorschau aufgehen und erst die Anfrage an die API scheitern — und man würde es in der App suchen, nicht in der Datei, in der es wirklich steht.

Eine alte Version der Seite

Die häufigste Verwirrung: der Agent meldet, es sei fertig, aber in der Vorschau steht noch das Alte. Meist ist eines dieser drei Dinge schuld — in dieser Reihenfolge:

Der Browser hält die geladene Seite: Tippe in der Leiste der Vorschau auf Neuladen. Es ist kein gewöhnliches Reload — es lädt ein neues Fenster, sodass nichts verwendet wird, was der Browser beiseitegelegt hat. Genau deshalb ist es so gebaut: du drückst es in dem Moment, in dem du den Code geändert hast, und willst den neuen sehen.
Der Dev-Server am Rechner hat nicht neu geladen: Hat der Agent etwas geändert, das zur Laufzeit nicht übernommen wird — Konfiguration, Abhängigkeiten, den Build — hilft Neuladen am Handy nicht, weil am Rechner noch der alte Prozess läuft. Lass den Agenten diesen Server neu starten.
Der Tunnel hängt an einer alten Verbindung: Schließe die Vorschau und öffne sie erneut. Es entsteht eine neue Verbindung zu localhost — das ist der Schritt, der hilft, wenn der Dev-Server inzwischen neu gestartet ist und die alte Verbindung hängen blieb.

Wenn auch das nicht hilft, liegt es fast immer am Rechner, nicht am Handy. Die schnellste Probe ist, diese Adresse im Browser am Rechner zu öffnen.

Weitere Dinge, die verwechselt werden

Auf dem Port lauscht nichts: Die App am Rechner läuft nicht, oder sie läuft auf einem anderen Port. Den Fehler zeigt die Vorschau als Hinweis mit der Möglichkeit, es erneut zu versuchen, nicht als Fehlerseite des Browsers.
Er lauscht, aber nur auf IPv6: Vite bindet sich standardmäßig an [::1]. Der Server probiert beide Adressfamilien, das funktioniert also — und scheitert es doch, zeigt der Hinweis, welche Adresse abgewiesen hat.
Ein weißer Bildschirm ohne Fehler: Meist eine Anfrage an einen anderen Port, die vom Handy nirgendwohin führt. Die Vorschau fängt solche Anfragen ab und sagt dir davon — die Lösung ist aber ein benanntes Ziel mit allen Ports, siehe oben.
Die App registriert einen Service Worker: Der Browser am Handy unterstützt Service Worker über HTTP nicht. Die Vorschau schiebt stattdessen einen untätigen Ersatz unter, damit die App nicht abstürzt — aber ein Offline-Modus funktioniert in der Vorschau nicht und soll es auch nicht.
Ein zerschossenes Layout: Schalte die Breite auf „Rechner“. Eine für den Desktop geschriebene App verhält sich in Handy-Breite anders, und das ist nicht die Schuld der Vorschau.

Woanders hängengeblieben als hier beschrieben? Schreib an support@coden-app.com.