Chapter 30

hono + Preact.js , MPA

knaka Tech-Blog
knaka Tech-Blog
2024.02.24に更新
このチャプターの目次
  1. 概要
  2. 構成
  3. 参考のコード
  4. build

概要

hono + Preact.jsの構成メモになります。

[公開: 2024/02/23]

構成

  • Preact: 10.19.6
  • hono
  • vite
  • cloudflare-pages

参考のコード

https://github.com/kuc-arc-f/hono_50preact

build

  • hono build
yarn build
  • front-build
  • watch-mode, ファイル監視できます。
npx vite build --mode client

npx vite build --mode client --watch
  • SSR: pages/About.tsx
About.tsx
export default function Page() { 
    return (
    <html>
        <head>
            <title>welcome</title>
            <link href="/static/main.css" rel="stylesheet" />
        </head>
        <body>
            <div id="app"></div>
            <script type="module" src="/static/About.js"></script>
        </body>
    </html>
    );
}
  • CSR: client/About/app.tsx
app.tsx
import { useState } from 'preact/hooks'
import Head from '../../components/Head';

export function App() {
  const [count, setCount] = useState(0)

  return (
    <div class="container mx-auto my-2 px-8 bg-white">
      <Head />
      <div>
      </div>
      <h1 class="text-4xl font-bold">About</h1>
      <hr />
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          [ count ]  is {count}
        </button>
      </div>
      <hr />
    </div>
  )
}