Feature request: WithFrontendConfig API for passing Aspire parameters to SPA frontends
- Dominant language
- C#
- Stars
- 6.3k
- Forks
- 991
- Avg merge
- 2d 15h
- Merged PRs (30d)
- 196
Description
### Is your feature request related to a problem?
Aspire parameters (from `AddParameter`) are set at runtime, but Vite/React/Angular bake environment variables at build time. There is no built-in way to pass an Aspire parameter to a SPA frontend.
The current workaround requires:
1. Passing the parameter to the API as an env var (`WithEnvironment`)
2. Writing a custom `/api/config/{key}` endpoint in the API project
3. Having the SPA fetch from that endpoint at mount time
Every team using `AddViteApp` / `AddNpmApp` with parameters will need this pattern. We filed a docs recipe request at microsoft/aspire.dev#394 but believe this should also be a first-class product feature.
### Describe the solution you'd like
A `WithFrontendConfig` API (or similar) that bridges Aspire parameters to SPA frontends:
```csharp
builder.AddViteApp("frontend", "./src/frontend")
.WithFrontendConfig("GOOGLE_CLIENT_ID", googleClientId);
```
This could auto-generate a config endpoint (or inject a `__config.json` at a well-known path like `/__aspire/config`) that the SPA can fetch at runtime.
### Describe alternatives you've considered
- **Manual config endpoint** — works but requires boilerplate in every project (our implementation is ~18 lines in `ConfigEndpoints.cs`)
- **Vite plugin that fetches config at build time** — defeats the purpose of runtime params
- **Documenting the pattern** — filed as microsoft/aspire.dev#394, zero engagement so far
### Additional context
We're using Aspire 13.2.0-preview.1 with `AddViteApp` + `WithPnpm()` and a React 19 frontend. The workaround (config endpoint pattern) has been stable across two sprints and works well — but it's boilerplate that every SPA+Aspire project will reinvent.
Contributor guide
Research direction
Start by tracing the AddViteApp and AddNpmApp entry points and their existing WithEnvironment behavior. Compare the proposed runtime endpoint or __config.json contract against the Vite/React and Angular use cases; done means supported SPA frontends can consume AddParameter values without each project creating a custom endpoint.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, csharp, react, vite
- Domain
- backend-api-design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100