SPA, Preact.js + preact-router + vite + express フルスタック

npm i preact-router

import { h, Component, render } from 'preact'
import Router from 'preact-router';
....

const App = () => (
  <div class="app">
    <Header />
    <Router>
      <Home path="/" />
      <About path="/about" />
      <Contact path="/contact" />
    </Router>
  </div>
);
render(<App />, document.getElementById('app')!);

import { useState } from 'preact/hooks'
//
function Page() {
  const [count, setCount] = useState(0)

  return (
  <>
    <div class="main_body_wrap container mx-auto my-2 px-8 bg-white">
      <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>
  </>
  )
}
export default Page;

{
  "type": "module",
  "scripts": {
    "dev": "NODE_ENV=develop nodemon",
    "dev:test": "NODE_ENV=develop npx nodemon ./dist/index.js",
    "build": "npm run clean && node build.js && npx vite build --mode client && npm run build:css",
    "build:css": "npx tailwindcss -i ./src/main.css -o ./public/static/main.css",
    "build:test": "vite build && vite build --mode client",
    "clean": "rimraf dist && rimraf public/static",
    "watch": "npx vite build --mode client --watch",
    "watch:css": "npx tailwindcss -i ./src/main.css -o ./public/static/main.css --watch",
    "test": "ts-node src/index.ts"
  },
  "dependencies": {
    "axios": "^1.6.5",
    "cookie-parser": "^1.4.6",
    "dotenv": "^16.4.4",
    "esm": "^3.2.25",
    "express": "^4.18.2",
    "express-session": "^1.17.2",
    "log4js": "^6.4.4",
    "preact": "^10.19.5",
    "preact-router": "^4.1.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.8.1",
    "@types/express": "^4.17.17",
    "@types/node": "^18.14.6",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "autoprefixer": "^10.4.17",
    "nodemon": "^3.0.3",
    "postcss": "^8.4.35",
    "rimraf": "^3.0.2",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3",
    "vite": "^5.1.4"
  }
}

yarn build

#dev-start
yarn dev