[ Home ]
back

Bun + Preact.js + Express, Full Stack example

id: 130, 2024-08-31

概要:

Bun + Preact.js フルスタック構成の例になります。

  • bundler は、Bunを使用する例です。

[ 作成日: 2024/08/30 ]

構成

  • Bun: 1.1.26
  • Preact.js
  • typescript
  • express

作成したコード

build, dev-start

bun run build
bun run dev

import renderLayout from "./renderLayout";
let PATH__ENTRY_CLIENT = "/static/Home.js";

//
export default function Page(props: any) { 
  if(process.env.NODE_ENV === "production") {
    PATH__ENTRY_CLIENT = "/public/static/Home.js";
  }
  //
  const htm = `
  <div className="container mx-auto my-2 px-8 bg-white">
    <div id="app"></div>
    <script type="module" src="${PATH__ENTRY_CLIENT}"></script>
  </div>
  `;
  return renderLayout({children: htm, title: "Home"});
}


import { useState } from "preact/hooks"
import { render } from "preact"
import Head from "../components/Head";
import Footer from "../components/Footer";
//
export function App() {
  const [count, setCount] = useState(0)

  return (
  <>
    <div class="main_body_wrap container mx-auto my-2 px-8 bg-white">
      <Head />
      <div>
      </div>
      <h1 class="text-4xl font-bold">Home</h1>
      <hr />
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          [ count ]  is {count}
        </button>
      </div>
      <hr />
    </div>
    
  </>
  )
}
render(<App />, document.getElementById("app")!);