Multi-App Deployment auf Vercel: Isolierte Sessions in iframes

Wenn du mehrere Versionen einer App gleichzeitig in deinem Portfolio zeigen möchtest, stoßt du schnell auf ein Problem: Shared Session State. Hier zeige ich dir die Architektur, die ich für mein Portfolio nutze.

Das Problem: Session-Sharing

Stell dir vor, du möchtest 3 verschiedene Rollen einer App nebeneinander darstellen:

Kunde: Schreibt Aufträge
Helfer: Nimmt Aufträge an
Handwerker: Verwaltet Anfragen

Wenn du alle drei als iframes auf der gleichen Domain einbettest, teilen sie sich den gleichen localStorage. Das bedeutet: Ein Login / Logout in einem iframe wirkt sich auf alle aus.

Problem:
├─ iframe 1 (Kunde)    \
├─ iframe 2 (Helfer)    ├─ Gleicher localStorage
└─ iframe 3 (Handwerker) /

Die Lösung: Separate Domains

Die elegante Lösung ist, jede App-Instanz auf einer eigenen Subdomain zu hosten:

✓ https://app-kunde.vercel.app       → Eigener localStorage
✓ https://app-helfer.vercel.app      → Eigener localStorage
✓ https://app-handwerker.vercel.app  → Eigener localStorage

Jede Domain hat ihre eigene Browser-Session — vollständige Isolation ohne Code-Änderungen.

Setup: 3 Vercel-Projekte anlegen

1. Git-Branch pro Demo

Erstelle einen separaten Branch, damit die Web-Demo unabhängig vom Hauptcode läuft:

git checkout -b web-demo
git push -u origin web-demo

2. Build-Dateien vorbereiten

Nach dem Build (z.B. flutter build web --release oder npm run build) müssen die Dateien in einen dedizierten Ordner:

mkdir -p build-output
cp -r dist/* build-output/  # oder Flutter: app/build/web/*

3. Jedes Vercel-Projekt konfigurieren

Für jedes der 3 Projekte:

| Setting | Wert | | --------------------- | -------------- | | Root Directory | build-output | | Framework Preset | "Other" | | Build Command | (leer lassen) | | Output Directory | (leer lassen) | | Production Branch | web-demo |

Wichtig: Die Production Branch muss auf web-demo gesetzt werden, sonst werden nur Preview-Deployments erstellt.

iframe-Einbettung im Portfolio

Jetzt kannst du alle 3 einfach nebeneinander darstellen:

const apps = [
  {
    label: "KUNDE",
    url: "https://app-kunde.vercel.app",
  },
  {
    label: "HELFER",
    url: "https://app-helfer.vercel.app",
  },
  {
    label: "HANDWERKER",
    url: "https://app-handwerker.vercel.app",
  },
];

export default function PhoneSimulator() {
  return (
    <div className="flex gap-8 justify-center">
      {apps.map((app) => (
        <div key={app.label} className="flex flex-col items-center">
          {/* Phone Frame */}
          <div className="relative w-[320px] h-[640px] rounded-[40px] border-4 border-gray-800 bg-black overflow-hidden shadow-2xl">
            {/* Notch */}
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-7 bg-black rounded-b-3xl z-10" />

            {/* iframe */}
            <iframe
              src={app.url}
              className="w-full h-full border-none"
              title={app.label}
              sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
            />

            {/* Home Indicator */}
            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-32 h-1 bg-gray-600 rounded-full" />
          </div>

          <p className="mt-4 font-bold text-lg">{app.label}</p>
        </div>
      ))}
    </div>
  );
}

Best Practices

1. Separate Repositories vs. One Repo

Ein Repository mit mehreren Branches (wie in meinem Setup) ist einfacher:

Gleicher Code für alle 3 Rollen
Unterschiedliche Konfiguration pro Branch (z.B. config.json)
Einfacheres Deployment mit git push

2. Scrolling in iframes optimieren

Damit User in den Phone-Simulatoren scrollen können:

<style>
  /* Hide scrollbars, keep functionality */
  ::-webkit-scrollbar {
    display: none;
  }
  * {
    scrollbar-width: none;
  }
</style>

3. Root Directory ist kritisch

Häufiger Fehler: Root Directory auf ./ statt auf den Build-Output-Ordner setzen. Das führt zu 404-Seiten.

✗ ./ — Vercel sucht im Projekt-Root
✓ build-output — Vercel deployed von hier

Häufige Fehler

| Fehler | Ursache | Lösung | | ------------------------------------------- | ---------------------------- | ------------------------------- | | 404 nach Push | Root Directory falsch | build-output exakt angeben | | Nur Preview, keine Production | Production Branch auf main | Zu web-demo ändern & redeploy | | iframe zeigt "Verbindung abgelehnt" | Browser blockiert iframe | X-Frame-Options Header setzen | | Login wirkt sich auf andere iframes aus | Shared localStorage | In separate Subdomains deployen |

Fazit

Mit 3 separaten Vercel-Projekten auf unterschiedlichen Subdomains kannst du:

✅ Mehrere App-Versionen gleichzeitig zeigen
✅ Unabhängige Auth-Sessions pro iframe
✅ Minimale Code-Änderungen (nur Konfiguration)
✅ Einfaches Deployment via git push

Diese Architektur ist besonders mächtig für Portfolio-Demo-Apps, Multi-Tenant-Systeme oder A/B-Testing auf deiner Website.