https://github.com/pdmlab/aspnet-core-htmx-vsa-template
Vertical Slice Architecture ASP.NET Core App template with Tailwind + HTMX
https://github.com/pdmlab/aspnet-core-htmx-vsa-template
aspnetcore-template htmx-template tailwindcss-template
Last synced: about 1 year ago
JSON representation
Vertical Slice Architecture ASP.NET Core App template with Tailwind + HTMX
- Host: GitHub
- URL: https://github.com/pdmlab/aspnet-core-htmx-vsa-template
- Owner: PDMLab
- License: mit
- Created: 2023-06-23T10:17:59.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-29T13:46:56.000Z (over 2 years ago)
- Last Synced: 2025-06-25T15:07:33.158Z (about 1 year ago)
- Topics: aspnetcore-template, htmx-template, tailwindcss-template
- Language: C#
- Homepage:
- Size: 2.04 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template).
* 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](https://youtrack.jetbrains.com/issue/RIDER-58725).
## 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
```shell
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
```shell
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
```bash
find . -depth -name "*AspNetCoreMvcHtmx*" | \
while IFS= read -r ent; do mv $ent ${ent%AspNetCoreMvcHtmx*}MyApp${ent##*AspNetCoreMvcHtmx}; done
```