Blazor Server + YARP - Static Files (CSS/JS) 404 & Circuit Failed to Initialize
- Dominant language
- C#
- Stars
- 9.6k
- Forks
- 933
- Avg merge
- 12d 18h
- Merged PRs (30d)
- 2
Description
Hello community,
I am currently implementing YARP (Yet Another Reverse Proxy) in my Blazor Server application to proxy multiple existing projects. However, I am encountering the following issues:
1. **Static files (CSS, JS, etc.) are not loading (404 errors)**
- The browser console shows multiple Failed to load resource: the server responded with a status of 404 errors for CSS and JS files.

2. Blazor Circuit Initialization Failure
**- After the WebSocket connection is established, I get the following error:**
[**Error**] The circuit failed to initialize.
Connection disconnected.
**### Project Setup & Code Snippets**
**Program.cs Configuration**
```
builder.Services.AddReverseProxy();
builder.Services.AddSingleton();
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAntiforgery();
app.UseAuthentication();
app.UseAuthorization();
app.MapReverseProxy();
app.MapRazorComponents().AddInteractiveServerRenderMode();
app.Run();
```
**DynamicProxyConfigProvider.cs (Route & Cluster Configuration)**
```
routes.Add(new RouteConfig
{
RouteId = routeId,
ClusterId = clusterId,
Match = new RouteMatch { Path = $"{proxiedUrl}/{{**catch-all}}" },
Transforms = new List>
{
new Dictionary { { "PathRemovePrefix", proxiedUrl } }
}
});
clusters.Add(new ClusterConfig
{
ClusterId = clusterId,
Destinations = new Dictionary
{
{ "destination", new DestinationConfig { Address = item.Url } }
}
});
```
**Index Page (Navigation to Proxy URL)**
```
string sanitizedTitle = Uri.EscapeDataString(item.Title.Trim().Replace(" ", "-").ToLower());
string proxiedUrl = $"/system/{sanitizedTitle}-{item.Id}";
Navigation.NavigateTo(proxiedUrl, true);
```
### **Steps to Reproduce:**
1. Set up a Blazor Server application with YARP.
2. Proxy an external Blazor app via YARP.
3. Open the browser and check the console (F12).
4. Observe the 404 errors for static files.
5. Attempt to initialize a Blazor session and note the circuit failure.
**What I Have Tried:**
-Ensured Static Files Exist in wwwroot.
-Added UseStaticFiles() before UseRouting().
-Checked _content/ Paths for Blazor resources.
-Enabled WebSockets in YARP.
-Modified appsettings.json to match YARP paths.
**Expected Behavior:**
-Static files should load correctly.
-Blazor Circuit should initialize without failure.
**Environment:**
- .NET Version: net9.0
- YARP Version: 2.3.0
- Blazor Server Framework Version: net9.0
- Hosting Environment: Localhost (https://localhost:7287)
- Browser: Edge
**### Questions:**
1. How do I ensure YARP properly serves static files?
2. How can I debug Blazor Circuit Initialization Failure through YARP?
Contributor guide
Assessment
This issue has not been assessed yet.