YARP reverse proxy serving a Vite frontend with dual-mode operation (dev HMR + production static files).
Run Mode:
flowchart LR
Browser --> YARP
YARP --> Vite[Vite Dev Server<br/>HMR enabled]
Publish Mode:
flowchart LR
Browser --> YARP[YARP serving<br/>Vite build output<br/>'npm run build']
- addViteApp: Vite-based frontend application
- addYarp: Reverse proxy with dual-mode routing
- publishWithStaticFiles: Automatic static file serving in production
- executionContext.isRunMode: Different behavior for dev vs production
- Minimal AppHost: Single-file orchestration
aspire runaspire run # Run locally
aspire deploy # Deploy to Docker Compose
aspire do docker-compose-down-dc # Teardown deploymentDual-Mode YARP - Run mode proxies to Vite, publish mode serves static files:
import { createBuilder } from "./.aspire/modules/aspire.mjs";
const builder = await createBuilder();
const executionContext = await builder.executionContext.get();
const frontend = await builder.addViteApp("frontend", "./frontend");
await builder.addYarp("app")
.withConfiguration(async (yarp) =>
{
if (await executionContext.isRunMode.get())
{
const frontendCluster = await yarp.addClusterFromResource(frontend);
await yarp.addRoute("{**catch-all}", frontendCluster);
}
})
.publishWithStaticFiles(frontend);Single Entry Point - YARP provides one external endpoint for the entire application