Kamal Hono

• Example application based on Yusuke Wada's blog post, "Hono + htmx + Cloudflare is a new stack"
• Key differences
  • Uses Hotwire (Turbo and Stimulus) instead of HTMX.
    • Hotwire will generally require custom JavaScript. We use the no-build approach for "client-side JavaScript".
    • To clarify, "client-side JavaScript" refers to JavaScript run on the browser. We only use JSX as a templating engine, so in our case, JSX is "server-side JavaScript".
  • Deployed on VPS instead of Cloudflare, using Kamal 2.0 – kamal-hono.castle104.com. (more information on this approach ...)
  • We use a local SQLite database instead of Cloudflare D1. We also use Drizzle as the ORM.
  • Instead of including Tailwind CSS from the CDN, we compile the CSS with Tailwind CLI.
  • A "Restore" button is provided in the UI to re-seed the database.

kamal-hono.mov

Local development

npm install
npm run dev

open http://localhost:3000

Deployment

SQLite database file with seed data has been committed to Git for convenience. We might want to change this.

• Set up Kamal as described in this Zenn article.
• Run kamal deploy to deploy
• To migrate the database, run kamal drizzle-push.

Todos

• Run automatic database migrations during Kamal deploy.
• Add digests to assets (including images) for cache busting.
• Automate Stimulus controller generation
• Automate import maps generation.

Goals

• Provide a JSX-based platform for Hotwire.
  • This allows writing type-safe HTML templates.
• Include niceties like asset digests that will be necessary if we use a CDN in production.
• See if we can go no-build as well, although not a priority since build tools like esbuild are quite good.