Live Preview

The Preview tab is not a screenshot — it is a real dev server running your app, so what you see is exactly what ships.

How it works

1. You click Preview. The client asks the backend to start a preview for the project.
2. The backend finds the project's folder, picks a free port in the 5100–5199 range, and spawns the dev server (Vite for web) with a base path of /api/PreviewProxy/port/{port}/.
3. Once the server is ready, the API returns a public proxy URL and the client embeds it in an iframe.

Why a proxy sits in front

• The dev server only listens on localhost; the proxy forwards each request to the right port.
• Headers are adjusted so the app can render inside the iframe.
• The WebSocket upgrade is forwarded too, so hot-module reload works — edit via chat and the preview updates in place.

First start vs. later visits

• The first start runs npm install (~30–60 seconds), so the very first preview is slower.
• Later visits reuse the running server and load instantly.
• A blank preview right after generating usually means install hasn't finished — wait a few seconds.

If the preview won't show

• Open your browser's dev-tools console; a 404 on the entry file means Vite started before install finished — click Retry.
• A 502 means the server is still starting — wait 10–30 seconds and reload.
• Still stuck? Paste the console error into chat and ask the AI to fix it.

Common mistakes to avoid

• Judging the first second. Give the initial npm install time before assuming something's wrong.
• Blocking WebSockets. A proxy that strips WebSocket upgrades breaks hot reload — the preview loads but won't refresh.

FAQ