pb-templ-htmx-tailwind

POC with PocketBase + Templ, HTMX + hyperscript and Tailwind + daisyUI

Roadmap

• [x] Integrate templ with PocketBase
• [x] Integrate tailwind & daisyUI with templ
• [x] Integrate htmx with templ and PocketBase
• [x] Auth
  • [x] Simple login with a Pocketbase user (email/username + password workflow)
  • [x] Registering a new user
  • [x] Display user, customize navbar when logged-in
  • [x] Logout
  • [ ] Handle OAuth2
• [x] Proper form handling w/ per-field error
• [ ] Error handling
  • [x] Display error when endpoint fails
  • [ ] Consistency
• [ ] Lists
  • [ ] CRUD operations
  • [x] Display user's lists
  • [ ] Archive
  • [x] Archive a list
  • [x] Unarchive
  • [ ] Toggle to only display not archived lists

Development

Requirements

• Go
• Bun
  • Only used to generate CSS files with tailwind
• Make
  • Optional but will make your life easier

Once these two requirements are met:

$ make deps
$ make

VSCode debug

The .vscode folder is configured to add a Run and a Debug launch commands.

Build workflow

• Generate templ Go files
• Generate minified CSS with tailwind & daisyUI based on templ files
• Embed assets in Go binary (CSS, favicon, htmx, hyperscript, etc)

Live mode

$ go install github.com/bokwoon95/wgo@latest
$ make live

Live mode profits from Make's multi-process abilities by running three commands in parallel:

• bun run tailwindcss -m -i ./assets/tailwind.css -o ./assets/dist/styles.min.css --watch
• wgo -file .go -xfile=_templ.go go run main.go serve :: wgo -file .css templ generate --notify-proxy
• templ generate --watch --proxy="http://127.0.0.1:8090" --open-browser=false

This will start templ's hot reload server that allows to automatically refresh the page whenever a template changes without restarting the server. Modifying the templates also changes the CSS file and triggers a page reload by sending a payload to templ's hot reload server. Whenever a go file that is not a templ generated file is changed, the backend restarts too.

Live mode also disables browser caching by setting the Cache-Control header to "no-store" for assets. This ensures the main CSS file is not cached when templ hot reloads the page.

Docker

$ docker build -t ptht:latest .
$ docker run --rm -p 8080:8080 -v $PWD/dockerdata/pb_data:/pb_data --name ptht ptht:latest