Die Architektur hinter den sofortigen Fly.io-Vorschauen von Coderblock

Eine wirklich nützliche Entwicklungsvorschau sollte nicht nur zeigen, wie eine App aussehen könnte. Sie sollte es ermöglichen, die App bereits während der Entwicklung tatsächlich zu nutzen: zwischen Seiten zu navigieren, ein Konto anzulegen, Daten zu speichern, Dateien hochzuladen, Zahlungen zu verarbeiten und Backend-Logik zu testen.

Genau das bietet die sofortige Vorschau von Coderblock.

Nachdem du eine Anwendung beschrieben oder mit einer der verfügbaren Vorlagen begonnen hast, ist das Projekt unter einer eigenen Adresse erreichbar. Dank Hot Reload erscheint jede weitere Änderung innerhalb weniger Sekunden in der Vorschau.

Aus Sicht der Nutzer ist der Ablauf einfach: Beschreibe eine Funktion und sieh zu, wie sie Gestalt annimmt. Hinter dieser Einfachheit steckt jedoch eine Architektur, die Frontend-Code, Backend-Dienste, Authentifizierung, Datenbanken, Storage, Secrets und die Bereitstellung der Vorschau koordiniert.

Der Chat ist die Steuerzentrale

Bei Coderblock bildet der Chat den Einstiegspunkt für den gesamten Entwicklungsprozess. Du musst nicht zuerst Infrastruktur, Repositorys oder getrennte Frontend- und Backend-Dienste konfigurieren. Beschreibe in natürlicher Sprache, was du entwickeln möchtest, und der Agent verwandelt deine Idee in eine funktionierende Anwendung.

Zum Beispiel:

• „Erstelle eine Buchungsplattform für ein Fitnessstudio.“
• „Füge eine Anmeldung hinzu und zeige Mitgliedern nur ihre eigenen Buchungen.“
• „Erstelle eine Admin-Ansicht mit einer Buchungstabelle.“
• „Ermögliche Kunden, monatlich 9,99 € zu bezahlen.“
• „Fixiere die Navigationsleiste auf Mobilgeräten.“

Eine einzige Anfrage kann somit Änderungen an mehreren Ebenen des Stacks auslösen. Das generierte Frontend verwendet React, Vite, TypeScript und Tailwind CSS. Bei einer gewöhnlichen Web-App läuft das Backend in einem eigenen Supabase-Projekt mit Postgres, Supabase Auth, Storage und Deno Edge Functions.

Das bedeutet: Die Vorschau ist nicht nur eine visuelle Darstellung des Prompts. Sie ist eine echte Full-Stack-Anwendung. Ein Formular kann Daten in Postgres speichern. Eine geschützte Seite kann die Sitzung des angemeldeten Nutzers verwenden. Hochgeladene Dateien können im Storage gespeichert werden. Backend-Logik kann über Edge Functions ausgeführt werden.

Für Enterprise-Web-Platform-Projekte verwendet Coderblock stattdessen ein Python- und FastAPI-Backend mit Neon Postgres. Das Prinzip bleibt gleich: Beschreibe das gewünschte Verhalten, lass es vom Agenten implementieren und überprüfe das Ergebnis sofort in der Vorschau.

---

Von der Anfrage zur Vorschau mit Hot Reload

Der Entwicklungszyklus lässt sich als Prozess mit fünf Schritten betrachten.

1. Beschreibe, was du entwickeln möchtest

Die Anfrage kann ein einzelnes Detail der Benutzeroberfläche oder eine Funktion betreffen, die das gesamte System umfasst. „Ändere die Farbe der Schaltfläche“ ist in erster Linie eine visuelle Änderung. „Füge Teamkonten mit privaten Arbeitsbereichen hinzu“ ist etwas völlig anderes: Dafür können Anpassungen an der Benutzeroberfläche, Authentifizierung, Datenbank, Rechteverwaltung und Anwendungslogik erforderlich sein.

Mit Coderblock musst du diese Anfrage nicht selbst in eine Liste aus Routen, Migrationen, Session-Handlern und Zugriffsrichtlinien übersetzen. Beschreibe einfach das gewünschte Ergebnis. Der Agent kümmert sich um die dafür notwendigen Details.

2. Die App wird durchgängig aktualisiert

Wenn eine Funktion es erfordert, nimmt die KI koordinierte Änderungen an den verschiedenen Ebenen der Anwendung vor.

Werden dauerhaft gespeicherte Daten benötigt, kann sie die entsprechende Migration des Postgres-Schemas entwerfen und ausführen. Ist eine Authentifizierung erforderlich, kann sie die Benutzeroberfläche mit Supabase Auth verbinden und auf Grundlage des aktuellen Nutzers Row-Level-Security-Richtlinien anwenden.

Jede App enthält außerdem eine Profiltabelle und eine grundlegende Struktur für die Rollenverwaltung. Dadurch verfügt der Agent über eine einheitliche Grundlage für Funktionen wie persönliche Dashboards, private Bereiche und Admin-Ansichten, ohne das Authentifizierungssystem jedes Mal neu entwickeln zu müssen.

3. Das Backend bleibt Bestandteil der App

Eine schnelle Vorschau ist nur dann wirklich hilfreich, wenn auch hinter der Benutzeroberfläche alles weiterhin funktioniert. Deshalb bleibt die App bei Coderblock mit ihrer Datenbank, Authentifizierung, ihrem Storage und ihren Backend-Funktionen verbunden. Im Tab Backend kannst du die Tabellen des Projekts, authentifizierte Nutzer, den Storage und die verfügbaren Funktionen einsehen.

Der Vorteil besteht darin, dass jede Iteration auf der vorherigen aufbaut.

Eine Tabelle hinzuzufügen bedeutet nicht, eine vorübergehende Simulation zu erstellen, sondern das Datenmodell der App zu verändern. Die nächste Anfrage kann auf derselben Struktur aufbauen und Filter, Dashboards, Beziehungen oder Berechtigungen ergänzen.

4. Die Vorschau wird in Echtzeit aktualisiert

Das Projekt wird unter seiner eigenen Vorschauadresse <app>.coderblock.dev bereitgestellt. Wenn sich die App ändert, werden die Aktualisierungen per Hot Reload schnell ausgerollt und in der laufenden Umgebung sichtbar.

Dabei geht es nicht nur um Geschwindigkeit, sondern um einen durchgängigen Prozess.

Du musst nicht für jede Iteration eine neue Demo erstellen oder zwischen verschiedenen Umgebungen wechseln. Stattdessen kannst du dich kontinuierlich zwischen Chat, Vorschau und Backend bewegen und arbeitest dabei immer an derselben Anwendung.

Die Fly.io-Vorschau ist Teil dieses Bereitstellungsprozesses, die Nutzung bleibt jedoch unkompliziert: Jedes Projekt verfügt über eine erreichbare Entwicklungsumgebung, Aktualisierungen werden schnell bereitgestellt und die Vorschau bleibt mit den vollständigen Full-Stack-Diensten der App verbunden.

Du musst keine Vorschau-Server oder Deployment-Pipelines konfigurieren, bevor du das gerade entwickelte Ergebnis testen kannst.

5. Testen, korrigieren, weitermachen

An diesem Punkt zeigt sich der eigentliche Wert der Vorschau. Du kannst durch die App navigieren, ihr responsives Verhalten prüfen, Konten erstellen, Formulare absenden, Berechtigungen kontrollieren und das Verhalten verschiedener Rollen testen.

Falls etwas nicht wie erwartet funktioniert, musst du nicht zum Code zurückkehren und selbst herausfinden, was geändert werden muss. Du kannst einfach die nächste Anpassung beschreiben.

Beschreiben → generieren → Vorschau öffnen → testen → verfeinern

Genau deshalb beruht die Geschwindigkeit von Coderblock nicht allein auf der Codegenerierung. Der gesamte Entwicklungsprozess bleibt innerhalb desselben Workflows.

Secrets bleiben außerhalb des Codes

Eine schnelle Entwicklungsumgebung sollte niemals Abstriche bei der Sicherheit erfordern.

Wenn eine Integration ein Secret benötigt, verarbeitet Coderblock es über eine spezielle Eingabeaufforderung für Umgebungsvariablen. Der Wert wird im serverseitigen Secret-Speicher des Projekts abgelegt, ohne in den generierten Code oder die normale Unterhaltung eingefügt zu werden.

Stripe ist ein gutes Beispiel für diesen Ansatz.

Im standardmäßig verwalteten Modus erfasst der Agent die benötigten Angaben, etwa Land und Unternehmensname, und erstellt ein verwaltetes Stripe-Konto für das Projekt. Du musst API-Schlüssel nicht direkt verwalten, außerdem übernimmt Coderblock die Konfiguration der Webhooks.

Die Zahlungseinrichtung und KYC-Verifizierung können anschließend über den gehosteten Onboarding-Link von Stripe abgeschlossen werden.

Im BYOK-Modus fordert der Agent STRIPE_SECRET_KEY sicher an, speichert ihn serverseitig und konfiguriert den Webhook automatisch. In beiden Fällen kann Coderblock die benötigten Stripe-Produkte und Preise anlegen, den Checkout konfigurieren und die verschiedenen Komponenten mit der Anwendung verbinden. Bevor Live-Zahlungen aktiviert werden, kannst du Tests durchführen.

Vorschau und Produktion sind nicht dasselbe

Die Vorschau dient zum Entwickeln und Experimentieren. Die Produktion ist für die Veröffentlichung vorgesehen. Es handelt sich um zwei getrennte Phasen, die Coderblock klar voneinander unterscheidet.

Sobald die App fertig ist, kannst du Veröffentlichen auswählen, um sie unter <app>.coderblock.app bereitzustellen. SSL ist inbegriffen und spätere Releases werden über schnelle Hot Updates ausgeliefert.

Dadurch wird verhindert, dass eine experimentelle Änderung aus dem Chat automatisch als Produktionsversion veröffentlicht wird. Du kannst außerdem unter Einstellungen → Domains eine eigene Domain verbinden, indem du den Anweisungen zur Konfiguration der DNS-Einträge folgst. Alternativ kannst du die Domain direkt über Coderblock kaufen. In diesem Fall werden DNS und SSL automatisch konfiguriert.

So entsteht ein klarer Ablauf:

Chat → Vorschau → Test → Veröffentlichung

Der Chat steuert die Entwicklung, in der Vorschau kannst du das Ergebnis ansehen und testen, das Backend stellt die tatsächliche Funktionsfähigkeit der App sicher und mit der Veröffentlichung geht die freigegebene Version online.

Eine Architektur für schnelle Iterationen

Der eigentliche Wert eines Systems für sofortige Vorschauen liegt nicht in einer einzelnen Infrastrukturkomponente. Er liegt in der Fähigkeit des Gesamtsystems, mit dem kreativen Prozess Schritt zu halten. Bei Coderblock gehören Frontend, Datenbank, Authentifizierung, Storage, Funktionen, Secrets und Vorschauumgebung zu einem gemeinsamen Workflow. Du kannst mit einem einzigen Satz beginnen, eine funktionierende Full-Stack-App erhalten, sie sofort testen und anschließend im Dialog weiterentwickeln.

Ohne Server manuell zu konfigurieren. Ohne ständig zwischen verschiedenen Tools zu wechseln. Ohne jede Änderung in ein neues Deployment zu verwandeln.

Die Infrastruktur bleibt weitgehend unsichtbar. So kannst du dich auf das Wesentliche konzentrieren: entwickeln, testen und iterieren.