[ Home ]
back

Bun + React.js + Express, Full Stack example

id: 129, 2024-08-31

概要:

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

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

[ 作成日: 2024/08/30 ]

構成

  • Bun: 1.1.26
  • React
  • typescript
  • express

作成したコード

build, dev-start

bun run build
bun run dev

import * as React from "react";
import Layout from "./Layout";

console.log("env=", process.env.NODE_ENV)
//
export default function Page() { 
  return (
  <Layout>
    <div id="root"></div>
    {(process.env.NODE_ENV !== "production") ? (
        <script type="module" src="/static/home.js"></script>
    ): (
        <script type="module" src="/public/static/home.js"></script>
    )}   
  </Layout>
  );
}

import React from "react"
import ReactDOM from "react-dom/client"
import Head from "../components/Head"
//
function Page(){
  return(
  <div>
    <Head />
    <h1 className="text-4xl font-bold">Home</h1>
  </div>
  );
}
//
ReactDOM.createRoot(document.getElementById("root")!).render(
  <Page />
)