A mostly derivative work by a lesser member of the family of great coding apes - or my personal riff on the excellent AHA Stack by Flavio.
The goal is to create a fairly realistic example of a current Razor Pages application and progressively enhance the frontend performance with a combination of HTMX and Alpine.js.
- Flavio already coined the term "The AHA Stack", in early January of 2024, for his novel combination of Astro, HTMX and Alpine.js.
- The OG .NET community's habit of slapping an "n" in front of everything and calling it Producttm
- libman - improved client-side library management for ASP.NET Core
- Cleanup the starter template
- Remove
app.UseHttpsRedirection();
from Program.cs - let the server handle it - Likewise remove the https profile from
$ProjectRoot/Properties/launchSettings.json
- While we are in launchSettings change the default port to 5000
- Remove the partial
$ProjectRoot/Pages/Shared/_ValidationScriptsPartial.cshtml
(YAGNI) - From
$ProjectRoot/wwwroot/lib
remove all jQuery and Bootstrap folders
- Remove
- Install NuGet packages
- Alpine.TagHelpers
- Htmx
- Htmx.TagHelpers
- Update
$ProjectRoot/Pages/_ViewImports.cshtml
to include the new tag helpers@addTagHelper *, Alpine.TagHelpers @addTagHelper *, Htmx.TagHelpers
- Add additional client-side libraries with libman
- Accept the default cdn, cdnjs
- Accept the default destination, wwwroot/lib
libman init libman install alpinejs libman install bootstrap libman install font-awesome libman install htmx
- Update
$ProjectRoot/Pages/_Layout.cshtml
- correct links and add resources- In the head section fix bootstrap link, add font-awesome link, and add a section for head-scripts (primarily for Alpine.js)
... <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>@ViewData["Title"] - nAHA Demo</title> <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css"/> <link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css"/> <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/> @await RenderSectionAsync("Head", required: false) </head> ...
- At the bottom of the body section, remove jQuery and site.js scripts
- Fix the bootstrap JavaScript bundle script tag, and add the htmx script tag
... <script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="~/lib/htmx/htmx.min.js"></script> @await RenderSectionAsync("Scripts", required: false) </body> </html>
- In the head section fix bootstrap link, add font-awesome link, and add a section for head-scripts (primarily for Alpine.js)
- Grab a Bootstrap template to start, and modify the
$ProjectRoot/Pages/_Layout.cshtml
markup to match
- htmx - htmx homepage
- Hypermedia Systems - A book about HTMX
- HTMX for ASP.NET Core Developers - JetBrains' multipart HTMX tutorialÂş
- Alpine.js Tutorial - A tutorial on how to enable clientside functionality with Alpine.js
- The AHA Stack - The original AHA Stack by Flavio