Tech stack stub page and changing project to be just one Web Assembly project for now

2026-05-27 11:25:04 -04:00
parent 8a20cfec4f
commit dd74f9b69f
140 changed files with 64156 additions and 97 deletions
@@ -0,0 +1,78 @@
+# Blazor Project Configuration
+
+This document explains the hosting model used in this project, how to identify it, and how to switch between different Blazor setups.
+
+## Current Project Type: Blazor Web App (.NET 8+)
+
+This project uses the **Blazor Web App** template introduced in .NET 8. This is a unified model that supports multiple rendering modes:
+- **Static Server-Side Rendering (Static SSR)**: The default mode for most components in this project.
+- **Interactive WebAssembly**: Currently configured as the interactive hosting model.
+
+### 1. How to tell it's using WebAssembly
+You can identify the hosting model by looking at the following locations:
+
+- **`AOW4/Program.cs`**:
+  - `builder.Services.AddRazorComponents().AddInteractiveWebAssemblyComponents();` registers the WebAssembly services.
+  - `app.MapRazorComponents<App>().AddInteractiveWebAssemblyRenderMode()` enables the WebAssembly rendering mode.
+- **Project Structure**:
+  - **`AOW4` (Server Project)**: Handles the initial request and serves the static assets.
+  - **`AOW4.Client` (Client Project)**: Contains components and logic intended to run in the user's browser via WebAssembly.
+- **Project References (`AOW4.csproj`)**:
+  - The server project references the client project: `<ProjectReference Include="..\AOW4.Client\AOW4.Client.csproj" />`.
+  - It also includes the package `Microsoft.AspNetCore.Components.WebAssembly.Server`.
+
+## 2. Switching Between Setups
+
+### Switching to Blazor Server (Interactive Server)
+If you want components to run on the server via SignalR instead of WebAssembly:
+
+1. **Update `Program.cs` in the Server project**:
+   ```csharp
+   // Add service registration
+   builder.Services.AddRazorComponents()
+       .AddInteractiveServerComponents(); // Add this line
+
+   // Enable render mode
+   app.MapRazorComponents<App>()
+       .AddInteractiveServerRenderMode(); // Add this line
+   ```
+2. **On your Components**:
+   Change the render mode attribute at the top of your `.razor` files:
+   ```razor
+   @rendermode InteractiveServer
+   ```
+
+### Using Interactive Auto
+Auto mode uses Blazor Server while the WebAssembly bundle is downloading, then switches to WebAssembly on subsequent visits.
+
+1. **Update `Program.cs`**:
+   Ensure both `AddInteractiveServerComponents()` and `AddInteractiveWebAssemblyComponents()` are registered, and both render modes are added to `MapRazorComponents<App>()`.
+2. **On your Components**:
+   ```razor
+   @rendermode InteractiveAuto
+   ```
+
+### Switching to ONLY Blazor Server
+To remove WebAssembly entirely:
+1. Remove the `AOW4.Client` project reference from `AOW4.csproj`.
+2. Remove all "WebAssembly" related calls in `Program.cs`.
+3. Delete the `AOW4.Client` project.
+4. Ensure all components are moved to the `AOW4` (Server) project.
+
+## 3. Production Release for Blazor WebAssembly
+
+Since this is a **hosted** Blazor Web App, you publish the **Server project**. The build process automatically handles the WebAssembly client assets.
+
+### Command
+Run this command from the solution root:
+```powershell
+dotnet publish AOW4\AOW4.csproj -c Release
+```
+
+### What happens during publish:
+1. **Server Compilation**: The ASP.NET Core host project is compiled.
+2. **Client Compilation**: The `AOW4.Client` project is compiled into WebAssembly (`.wasm`) and static assets.
+3. **Asset Integration**: All client-side files (WASM, JS, CSS, images) are placed in the `wwwroot` folder of the published server output.
+4. **Output Directory**: The final ready-to-deploy application will be in `AOW4\bin\Release\net10.0\publish\`.
+
+To deploy, simply copy the contents of the `publish` folder to your web server (IIS, Azure App Service, Nginx, etc.).
@@ -0,0 +1,18 @@
+---
+type: Prompt
+---
+Create a new page called Tech Stack with the href of `/tech-stack`.
+
+Populate it with information from TechStackData.cs.
+
+Name, Description should be visible.
+
+If InUse is false, make the section of information greyed out and faded to indicate a lack of implementation.
+
+If you hover over the information, it should that it's interactive and clickable.
+
+Create a new dialog in the Components/Dialog folder to display the tech stack information.
+
+This dialog with display the Name and Description, but also the expected notes. The user should be able to quit out of the dialog with a close button, or close it by clicking the outside area around the dialog.
+
+Your logic should use the DialogService.cs for opening and closing the dialog.