Fix blazor.web.js 404: move App.razor and Routes.razor to Host project
Root cause: App.razor was in CentralUI (Microsoft.NET.Sdk.Razor RCL) but MapRazorComponents<App>().AddInteractiveServerRenderMode() serves _framework/blazor.web.js from the host assembly (Microsoft.NET.Sdk.Web). Per MS docs, the root component must be in the server (host) project. - Move App.razor and Routes.razor from CentralUI to Host/Components/ - Add Host/_Imports.razor for Razor component usings - Make MapCentralUI generic: MapCentralUI<TApp>() accepts root component - Add AdditionalAssemblies to discover CentralUI's pages/layouts - Routes.razor references both Host and CentralUI assemblies - Fix all DI registrations (TemplateEngine services) - SCADALINK_CONFIG env var for role-specific config loading Verified: blazor.web.js HTTP 200 (200KB), login page renders with Blazor interactive server mode, SignalR circuit establishes, LDAP auth works.
This commit is contained in:
Joseph Doherty
@@ -1,131 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ScadaLink</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YcnS/1p0TQGL3BNgcree90f9QM0jB1zDTkM6"
|
||||
crossorigin="anonymous" />
|
||||
<style>
|
||||
.sidebar {
|
||||
min-width: 220px;
|
||||
max-width: 220px;
|
||||
min-height: 100vh;
|
||||
background-color: #212529;
|
||||
}
|
||||
.sidebar .nav-link {
|
||||
color: #adb5bd;
|
||||
padding: 0.4rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.sidebar .nav-link:hover {
|
||||
color: #fff;
|
||||
background-color: #343a40;
|
||||
}
|
||||
.sidebar .nav-link.active {
|
||||
color: #fff;
|
||||
background-color: #0d6efd;
|
||||
}
|
||||
.sidebar .nav-section-header {
|
||||
color: #6c757d;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.75rem 1rem 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.sidebar .brand {
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #343a40;
|
||||
}
|
||||
#reconnect-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 9999;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
#reconnect-modal .modal-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#reconnect-modal .modal-content {
|
||||
max-width: 400px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
<HeadOutlet />
|
||||
</head>
|
||||
<body>
|
||||
<CascadingAuthenticationState>
|
||||
<Router AppAssembly="typeof(App).Assembly">
|
||||
<Found Context="routeData">
|
||||
<AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)">
|
||||
<NotAuthorized>
|
||||
@if (context.User.Identity?.IsAuthenticated != true)
|
||||
{
|
||||
<RedirectToLogin />
|
||||
}
|
||||
else
|
||||
{
|
||||
<NotAuthorizedView />
|
||||
}
|
||||
</NotAuthorized>
|
||||
<Authorizing>
|
||||
<p class="text-muted p-3">Checking authorization...</p>
|
||||
</Authorizing>
|
||||
</AuthorizeRouteView>
|
||||
</Found>
|
||||
<NotFound>
|
||||
<LayoutView Layout="typeof(MainLayout)">
|
||||
<div class="container mt-5">
|
||||
<h3>Page Not Found</h3>
|
||||
<p class="text-muted">The requested page does not exist.</p>
|
||||
<a href="/" class="btn btn-outline-primary btn-sm">Return to Dashboard</a>
|
||||
</div>
|
||||
</LayoutView>
|
||||
</NotFound>
|
||||
</Router>
|
||||
</CascadingAuthenticationState>
|
||||
|
||||
<div id="reconnect-modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="spinner-border text-primary mb-3" role="status">
|
||||
<span class="visually-hidden">Reconnecting...</span>
|
||||
</div>
|
||||
<h5>Connection Lost</h5>
|
||||
<p class="text-muted mb-0">Attempting to reconnect to the server. Please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="_framework/blazor.server.js"></script>
|
||||
<script>
|
||||
Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
|
||||
document.getElementById('reconnect-modal').style.display = 'block';
|
||||
};
|
||||
Blazor.defaultReconnectionHandler._reconnectedCallback = function (d) {
|
||||
document.getElementById('reconnect-modal').style.display = 'none';
|
||||
};
|
||||
Blazor.defaultReconnectionHandler._reconnectionFailedCallback = function (d) {
|
||||
document.getElementById('reconnect-modal').querySelector('p').textContent =
|
||||
'Unable to reconnect. Please refresh the page.';
|
||||
};
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user