https://github.com/benc-uk/htmx-go-todo
An example of a simple HTMX app built using Go
https://github.com/benc-uk/htmx-go-todo
echo-framework go golang htmx
Last synced: 9 months ago
JSON representation
An example of a simple HTMX app built using Go
- Host: GitHub
- URL: https://github.com/benc-uk/htmx-go-todo
- Owner: benc-uk
- License: mit
- Created: 2023-10-29T23:50:35.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-23T15:47:10.000Z (almost 2 years ago)
- Last Synced: 2025-02-14T06:38:14.050Z (11 months ago)
- Topics: echo-framework, go, golang, htmx
- Language: Go
- Homepage:
- Size: 6.49 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌐 HTMX with Go
An example of a simple HTMX app built using Go, created entirely for learning purposes 🧑
Tech stack:
- [Go](https://go.dev/)
- [Echo](https://echo.labstack.com/) - A web framework and routing for Go
- [HTMX](https://htmx.org/) - Hypertext magic and the reason this repo exists.
- [html/template](https://pkg.go.dev/html/template) - The standard Go package for templating HTML
- [Bulma](https://bulma.io/) - CSS framework & classes
Yes it's a todo app, of course it's a todo app, what did you expect?!
Currently there is no persistence or state store, everything lives in memory, but it is blazing fast 😉
All of this and not a single line of JavaScript! 😃
## 📂 Repo
The structure of the repo is as follows
```
📂
├── build Dockerfiles and other build artifacts
├── pkg
│ ├── middleware Simple middleware helpers for HTMX
│ └── todo Implementation of the todo data endpoints
├── server Main Go code for HTTP server
├── static Static files, images CSS etc
└── templates HTML templates (see below)
```
[](https://github.com/benc-uk/htmx-go-todo/actions/workflows/ci.yml) 
## 🧑💻 Developer Notes
Pre-reqs:
- A recent-ish version of Go (1.20+)
- A Linux environment with bash, make etc. WSL or MacOS is perfect.
### Makefile
```text
help 💬 This help message :)
install-tools 🔮 Install dev tools into local project tools directory
run 🚀 Run the server
build 🔨 Build the server
lint 🔍 Lint & format check only, sets exit code on error for CI
lint-fix 📝 Lint & format, attempts to fix errors & modify code
```
### Quick Start
```bash
make install-tools
make run
```
Open [http://localhost:4000](http://localhost:4000)
## 📝 Design Notes
The routes supported by the server are a little different from a traditional server side web app, or from a SPA based one.
As HTMX is based on fetching fragments of HTML the following was implemented:
```text
GET / Returns the index.html
GET /view/{name} Views are sub-pages rendered under the nav bar
GET /p/{name} For URLs linking directly to a specific view
```
The follow routes are equivent to `/api` routes in a SPA style app
```text
GET /data/todos/ Lists all todos
POST /data/todos/ Creates a new todo
GET /data/todos/{id} Render a single todo row
PUT /data/todos/{id} Update a single todo
DELETE /data/todos/{id} Delete a todo
GET /data/todos/{id}/edit Render a todo row for editing
```
The templates aligned to these routes are structured as follows:
- `templates/todo/*.html` - Todo fragments mainly returned by the handers for `/data/todos/` routes and not fetched directly.
- `templates/view/*.html` - Views show sub-sections or pages of the app, and are exposed via the `/view/{name}` route. The fact the URL and directory matches is just convention.
- `templates/index/index.html` - The top level index.html is placed into a subdirectory due to the strange way that `template.ParseGlob` works 😖
📝 NOTE: The names of the templates e.g. `{{ define "todo/list" }}` matches the directory structure e.g. `templates/todo/list.html` but this is just a convention I adopted to keep track of them, there is no connection between a template name and it's filename or directory.