PDMLab / aspnet-core-htmx-vsa-template

Vertical Slice Architecture ASP.NET Core App template with Tailwind + HTMX

ASP.NET (Core) MVC Template + HTMX + Tailwind + Vertical Slice Architecture Template (VSA)

This is a GitHub Template for ASP.NET Core MVC using .NET 6.

It contains

• a .NET 8 Solution configured for Vertical Slice Architecture (VSA)
• a ASP.NET Core MVC 8 project
• HTMX
• HTMX .NET extensions
• TailwindCSS 3 including hot reload (JIT)
• tmux/tmuxinator windows / panes for development

Usage

Create a new Repository

• Create a new Repository from this Template as described here.
• Clone your new repository locally

Run the solution

First time

yarn install
cd src/AspNetCoreMvcHtmx
yarn install
libman restore

Development

yarn start

tmuxinator starts a new session with three windows:

Workspace

App (.NET output)

Frontend (tailwind build)

Browse https://localhost:5001

HTMX interaction

HTMX usage is shown on the Registration view, even the password strength indicator is build with pure ASP.NET and HTMX (no additional JavaScript)

Known issues

• Not tested on Windows
• JetBrains Rider code completion does not work for TailwindCSS 3 JIT mode in .cshtml files currently.

Renaming solution / project / folders

Of course, you want to rename the projects files to match our needs.

You can use these commands, e.g. AspNetCoreMvcHtmx gets renamed to MyApp:

Rename all references inside the files

macOS

LC_ALL=C find . -type f -name '*.*' -not \( -path './node_modules/*' -o -path './src/AspNetCoreMvcHtmx/node_modules/*' -o -path './assets' \) -exec sed -i '' 's|AspNetCoreMvcHtmx|MyApp|g' {} \;

Linux

LC_ALL=C find . -type f -name '*.*' -not \( -path './node_modules/*' -o -path './src/AspNetCoreMvcHtmx/node_modules/*' -o -path './assets' \) -exec sed -i 's/AspNetCoreMvcHtmx/MyApp/g' {} \;

Rename files and folders

macOS and Linux

find . -depth -name "*AspNetCoreMvcHtmx*" | \
while IFS= read -r ent; do mv $ent ${ent%AspNetCoreMvcHtmx*}MyApp${ent##*AspNetCoreMvcHtmx}; done