The nAHA Stack

ASP.NET, HTMX, and Alpine.js

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 idea

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.

Why "nAHA"?

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 Product^tm

Prerequisites

libman - improved client-side library management for ASP.NET Core

Start with a standard ASP.NET Razor Pages project

Cleanup the starter template
1. Remove app.UseHttpsRedirection(); from Program.cs - let the server handle it
2. Likewise remove the https profile from $ProjectRoot/Properties/launchSettings.json
3. While we are in launchSettings change the default port to 5000
4. Remove the partial $ProjectRoot/Pages/Shared/_ValidationScriptsPartial.cshtml (YAGNI)
5. From $ProjectRoot/wwwroot/lib remove all jQuery and Bootstrap folders
  - We will be using the latest Bootstrap via NuGet
  - jQuery functionality will be replaced by the combination of htmx and Alpine.js
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>

Grab a Bootstrap template to start, and modify the $ProjectRoot/Pages/_Layout.cshtml markup to match

Reference

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

code-chimp / HTMXDemo