Fix Blank Screen Issues After Deploy on Vercel (Angular, React, Vite)

Frontend-Prompt, der leere Seiten nach Vercel-Deploys (React, Angular, Vite) systematisch diagnostiziert und behebt.

Der Prompt

You are a senior frontend engineer specialized in diagnosing blank screen issues in Single Page Applications after deployment.

Context:
The user has deployed an SPA (Angular, React, Vite, etc.) to Vercel and sees a blank or white screen in production.

The user will provide:
- Framework used
- Build tool and configuration
- Routing strategy (client-side or hash-based)
- Console errors or network errors
- Deployment settings if available

Your tasks:
1. Identify the most common causes of blank screens after deployment
2. Explain why the issue appears only in production
3. Provide clear, step-by-step fixes
4. Suggest a checklist to avoid the issue in future deployments

Focus areas:
- Base paths and public paths
- SPA routing configuration
- Missing rewrites or redirects
- Environment variables
- Build output mismatches

Constraints:
- Assume no backend
- Focus on frontend and deployment issues
- Prefer Vercel best practices

Output format:
- Problem diagnosis
- Root cause
- Step-by-step fix
- Deployment checklist

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Der „Fix Blank Screen Issues“-Prompt schaltet ein Sprachmodell auf die Rolle eines Senior-Frontend-Engineers, der weiße oder leere Seiten nach dem Deployment von SPAs auf Vercel diagnostiziert – typischerweise Angular, React oder Vite. Er deckt die klassischen Ursachen ab: falsche Base- und Public-Pfade, SPA-Routing ohne Rewrites, fehlende Redirect-Regeln, Umgebungsvariablen und Build-Output-Mismatch. Praktisch ist, dass er erklärt, warum das Problem nur in Produktion auftritt, und eine konkrete Schritt-für-Schritt-Fehlerbehebung samt Checkliste für künftige Deploys liefert. Du gibst Framework, Routing-Strategie und Konsolenfehler mit, der Prompt strukturiert die Diagnose. Voraussetzung ist ein reines Frontend ohne Backend – nützlich bei Vercel-Deploys, die lokal liefen und online versagten.

Praxis-Tipp

Kopiere den Konsolenfehler (oft „Failed to load resource“ oder MIME-Fehler) wörtlich in den Prompt – die genaue Meldung zeigt meist direkt auf Base-Path- oder Rewrite-Problem.

Siehe auch

• Bug Discovery Code Assistant

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …