htmx + Vite + d1, CMS 作る。

概要:

• 前scrapsの続編で、 htmx + Viteの関連メモとなります。
• CMS表示系、ブログ的なアプリです。
• ほぼSSR構成です。
• 検索部分で、htmx POST通信等の実装を追加。
• テストは、vercelデプロイする例です。
• テストDBは、D1で。CF-pages設置のheadless CMS連携します

[ 作成日: 2024/07/07 ]

---

環境

• htmx
• Vite
• express
• react-dom

---

作成したコード

• https://github.com/kuc-arc-f/express_47htmx/tree/main/sample/blog

https://github.com/kuc-arc-f/express_47htmx/tree/main/sample/blog

• .env
• API,API_KEY接続, サイトID等を設定

VITE_SITE_ID=1
VITE_API_URL=http://localhost
VITE_API_KEY="123"

---

• タイトル検索

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/blog/src/pages/posts/PostIndex.tsx

• hx-post: POST通信, 内部API エンドポイント指定
• hx-target: レスポンスを、レンダリング

  <form
  hx-post="/api/post/search_elem"
  hx-trigger="submit"
  hx-target="#search_result"
  hx-on="htmx:beforeRequest: Top.hiddenListArea()
  htmx:afterRequest: console.log("#afterRequest")"        
  >
    <input type="text" 
    className="mx-2 border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500" 
    name="seachKey" id="seachKey"
    placeholder="Title search" />
    <input type="text" name="api_url" className="d-none" defaultValue="/api/posts/search"/>
    <button type="submit"
    className="ms-2 bg-transparent hover:bg-purple-500 text-purple-700 font-semibold hover:text-white py-2 px-4 border border-purple-500 hover:border-transparent rounded" 
    id="btn_search"
    >Search</button>
  </form>

---

• 検索結果component
• /api/post/search_elem から、呼ばれるcomponent

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/blog/src/pages/posts/SearchResulte.tsx

---

• API : /api/post/search_elem
• sample/blog/src/routes/apiPost.ts

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/blog/src/routes/apiPost.ts

---

GIF

https://x.com/kuc_arc_f/status/1809752439580684534

---