Scaffold Blazor frontend host and root components
This commit is contained in:
18
RpgRoller/Components/App.razor
Normal file
18
RpgRoller/Components/App.razor
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
@using Microsoft.AspNetCore.Components.Web
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<base href="/" />
|
||||||
|
<title>RpgRoller</title>
|
||||||
|
<link rel="stylesheet" href="/styles.css" />
|
||||||
|
<HeadOutlet @rendermode="InteractiveServer" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Routes @rendermode="InteractiveServer" />
|
||||||
|
<script src="/js/rpgroller-api.js"></script>
|
||||||
|
<script src="_framework/blazor.web.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4
RpgRoller/Components/Layout/MainLayout.razor
Normal file
4
RpgRoller/Components/Layout/MainLayout.razor
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
@inherits LayoutComponentBase
|
||||||
|
@attribute [ExcludeFromCodeCoverage]
|
||||||
|
|
||||||
|
@Body
|
||||||
7
RpgRoller/Components/Pages/Home.razor
Normal file
7
RpgRoller/Components/Pages/Home.razor
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
@page "/"
|
||||||
|
@attribute [ExcludeFromCodeCoverage]
|
||||||
|
|
||||||
|
<main class="app-shell">
|
||||||
|
<h1>RpgRoller</h1>
|
||||||
|
<p class="status-line">Frontend migration in progress: Blazor shell is active.</p>
|
||||||
|
</main>
|
||||||
6
RpgRoller/Components/Routes.razor
Normal file
6
RpgRoller/Components/Routes.razor
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<Router AppAssembly="@typeof(Program).Assembly">
|
||||||
|
<Found Context="routeData">
|
||||||
|
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
|
||||||
|
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||||
|
</Found>
|
||||||
|
</Router>
|
||||||
9
RpgRoller/Components/_Imports.razor
Normal file
9
RpgRoller/Components/_Imports.razor
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
@using System.Diagnostics.CodeAnalysis
|
||||||
|
@using RpgRoller
|
||||||
|
@using RpgRoller.Contracts
|
||||||
|
@using Microsoft.AspNetCore.Components
|
||||||
|
@using Microsoft.AspNetCore.Components.Forms
|
||||||
|
@using Microsoft.AspNetCore.Components.Routing
|
||||||
|
@using Microsoft.AspNetCore.Components.Web
|
||||||
|
@using Microsoft.JSInterop
|
||||||
|
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
||||||
@@ -3,14 +3,17 @@ using RpgRoller.Hosting;
|
|||||||
|
|
||||||
var builder = WebApplication.CreateBuilder(args);
|
var builder = WebApplication.CreateBuilder(args);
|
||||||
builder.Services.AddRpgRollerCore(builder.Configuration, builder.Environment);
|
builder.Services.AddRpgRollerCore(builder.Configuration, builder.Environment);
|
||||||
|
builder.Services.AddRazorComponents()
|
||||||
|
.AddInteractiveServerComponents();
|
||||||
|
|
||||||
var app = builder.Build();
|
var app = builder.Build();
|
||||||
app.InitializeRpgRollerState();
|
app.InitializeRpgRollerState();
|
||||||
|
|
||||||
app.UseDefaultFiles();
|
|
||||||
app.UseStaticFiles();
|
app.UseStaticFiles();
|
||||||
|
|
||||||
app.MapRpgRollerApi();
|
app.MapRpgRollerApi();
|
||||||
|
app.MapRazorComponents<RpgRoller.Components.App>()
|
||||||
|
.AddInteractiveServerRenderMode();
|
||||||
app.Run();
|
app.Run();
|
||||||
|
|
||||||
public partial class Program;
|
public partial class Program;
|
||||||
|
|||||||
57
RpgRoller/wwwroot/js/rpgroller-api.js
Normal file
57
RpgRoller/wwwroot/js/rpgroller-api.js
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
window.rpgRollerApi = (() => {
|
||||||
|
async function request(method, url, body) {
|
||||||
|
const options = {
|
||||||
|
method,
|
||||||
|
credentials: "same-origin",
|
||||||
|
headers: {
|
||||||
|
Accept: "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (body !== null && body !== undefined) {
|
||||||
|
options.headers["Content-Type"] = "application/json";
|
||||||
|
options.body = JSON.stringify(body);
|
||||||
|
}
|
||||||
|
|
||||||
|
let response;
|
||||||
|
try {
|
||||||
|
response = await fetch(url, options);
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
return {
|
||||||
|
ok: false,
|
||||||
|
status: 0,
|
||||||
|
error: "Network error. Check your connection and retry."
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let parsed = null;
|
||||||
|
const text = await response.text();
|
||||||
|
if (text) {
|
||||||
|
try {
|
||||||
|
parsed = JSON.parse(text);
|
||||||
|
}
|
||||||
|
catch {
|
||||||
|
parsed = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
return {
|
||||||
|
ok: false,
|
||||||
|
status: response.status,
|
||||||
|
error: parsed && typeof parsed.error === "string" ? parsed.error : "Request failed."
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
status: response.status,
|
||||||
|
data: parsed
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
request
|
||||||
|
};
|
||||||
|
})();
|
||||||
Reference in New Issue
Block a user