Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romshark/htmx-demo-todoapp
An attempt at structuring an HTMX-driven Hypermedia application.
https://github.com/romshark/htmx-demo-todoapp
demo golang html htmx server-side-rendering
Last synced: 8 days ago
JSON representation
An attempt at structuring an HTMX-driven Hypermedia application.
- Host: GitHub
- URL: https://github.com/romshark/htmx-demo-todoapp
- Owner: romshark
- License: mit
- Created: 2024-08-02T08:14:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-16T00:38:45.000Z (about 1 month ago)
- Last Synced: 2024-10-17T11:18:12.295Z (about 1 month ago)
- Topics: demo, golang, html, htmx, server-side-rendering
- Language: CSS
- Homepage:
- Size: 283 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HTMX Tech-Demo - Todo App
A simple todo application powered by [Go](https://go.dev/), [HTMX](https://htmx.org),
[Templ](https://templ.guide), [TailwindCSS](https://tailwindcss.com/) and
[Alpine.js](https://alpinejs.dev/).
The server can be executed by simply running it in the root directory:
```sh
go run . -host=:8080
```
- **Graceful Degradation**: This app continues to provide limited core functionality
even when JavaScript is disabled by utilizing
[303 redirects](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/303),
[HTML forms](https://www.w3schools.com/html/html_forms.asp)
and the [`HX-Request`](https://htmx.org/reference/#headers) header.
JavaScript progressively enhances the UX through partial AJAX reloads
(full page reloads without JS) using HTMX, allowing
keyboard shortcuts (press "f" to focus the search part; press
"n" to focus the "New Todo" input field), and more.
- **Bundled CSS**: [PostCSS](https://postcss.org/) is used to build the CSS bundle.
[Templiér](https://github.com/romshark/templier) is configured to automatically watch
all relevant `.css` and `.templ` files, build the bundle and reload the browser tab
(see [dev mode](#dev-mode)).
- **Bundled JavaScript**: [eslint](https://eslint.org/) and
[esbuild](https://esbuild.github.io/) are used to build the `dist.js` JavaScript bundle.
[Templiér](https://github.com/romshark/templier) is configured to automatically watch
all relevant `.css` and `.templ` files, build the bundle and reload the browser tab
(see [dev mode](#dev-mode))
## Dev mode
Building the CSS bundle requires [Node.js](https://nodejs.org/) and `npm`
to be installed on your system.
For interactive development mode with automatic live-reload using
[Templiér](https://github.com/romshark/templier), simply run:
```sh
./dev.sh
```