# Web-Apps veröffentlichen

Eine Web-App aus Flutter Web, React Native Web oder Next.js läuft als Docker-Container auf deinem Server, bekommt ihre Dev-Adresse automatisch und für Produktion deine eigene Domain.

> Source: https://www.application-platform.com/de/docs/publish-web-apps/

Web-Apps sind die Browser-Variante deiner App-Komponente. Die Pipeline baut aus Flutter Web, React Native Web (Expo) oder Next.js ein Docker-Image und rollt es auf den [Server]({{< relref "servers" >}}) deines Projekts aus; für Produktion brauchst du eine [Domain]({{< relref "domain" >}}). Den Deploy-Ablauf beschreibt [Git-Workflow und Deployment]({{< relref "git-workflow" >}}).

## Wie die Web-App ausgeliefert wird

Traefik leitet Anfragen anhand der Domain an den Container der Web-App weiter; HTTPS-Zertifikate richtet die Plattform ein. Dev und Produktion sind getrennte Umgebungen mit eigener Konfiguration im `gitops-configuration`-Repository.

## Backend-Adresse und weitere Variablen

Die Plattform schreibt die Backend-URL der jeweiligen Umgebung in `env/dev.generated.env` und `env/prod.generated.env`; stage-übergreifende Werte wie die Sentry-DSN stehen in `env/shared.generated.env`. Diese Dateien werden bei Änderungen am Projekt neu erzeugt und nicht bearbeitet; eigene Variablen gehören in die passende `env/*.custom.env`. Wie die Dateien beim Build und bei `ap run-local` geladen werden, steht unter [Umgebungsvariablen]({{< relref "environment-setup" >}}).

## Die Adressen deiner Web-App

| Umgebung | URL |
|----------|-----|
| Dev | `<app>.dev.<projekt>.<organisations-domain>`, automatisch vergeben |
| Produktion | deine eigene Domain aus der Projekt-Konfiguration |

Für Produktion trägst du deine Domain im Projekt ein; die Plattform zeigt im Domain-Detail die nötigen DNS-Einträge und prüft laufend, ob sie gesetzt sind, wie unter [DNS konfigurieren]({{< relref "domain-how-to" >}}) beschrieben. Liegt die Domain bei Cloudflare, setzt die Plattform die Einträge selbst, sobald Cloudflare unter **Anbindungen** verbunden ist.

Bei einem [Whitelabel-Projekt]({{< relref "whitelabel-apps" >}}) bekommt jede Variante eigene Domains; ohne eigene Domain vergibt die Plattform `<variante>.<projekt>.<organisations-domain>`.

Fehler aus der Web-App landen in deinem Sentry-Projekt, sobald du die Komponente unter **Funktionen** dafür aktiviert hast ([Error-Tracking]({{< relref "error-tracking" >}})).