honojs · mck231 · Sep 25, 2024
diff --git a/hono-bun-jsx/README.md b/hono-bun-jsx/README.md
@@ -0,0 +1,28 @@
+# Hono + Bun Basic Client Component Example
+This is a simple project that demonstrates how to build a basic Hono app with Bun, including a client-side component rendered using `hono/jsx`.
+
+## Getting Started
+1. **Install Dependencies**  
+   First, make sure you have Bun installed. Then, install the necessary dependencies:
+
+    ```sh
+    bun install
+    ```
+
+2. **Running the Project**  
+   To start the development server and bundle the client-side code:
+
+    ```sh
+    bun run dev
+    ```
+
+   This will do two things:
+    - Bundle the client-side code from `src/App.tsx` into `static/App.js`.
+    - Start the Bun server with hot reloading using `src/index.tsx`.
+
+3. **Open the App**  
+   Once the server is running, open your browser and navigate to:  
+   [http://localhost:3000](http://localhost:3000)
+
+   You should see a basic app with a counter component that you can increment.
+
diff --git a/hono-bun-jsx/package.json b/hono-bun-jsx/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "my-app",
+  "scripts": {
+    "dev": "bun build src/App.tsx --outdir ./static --outfile App.js && bun run --hot src/index.tsx"
+  },
+  "dependencies": {
+    "hono": "^4.5.11"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  }
+}
diff --git a/hono-bun-jsx/src/App.tsx b/hono-bun-jsx/src/App.tsx
@@ -0,0 +1,28 @@
+import { FC, useState } from 'hono/jsx';
+import {render} from 'hono/jsx/dom';
+
+function Counter() {
+    const [count, setCount] = useState(0);
+    return (
+        <div>
+            <p>Count: {count}</p>
+            <button onClick={() => setCount(count + 1)}>Increment</button>
+        </div>
+    );
+}
+
+export const App: FC = () => {
+    return (
+        <div>
+            <h1>Counter Example</h1>
+            <Counter />
+        </div>
+    );
+};
+
+if (typeof window !== 'undefined') {
+    const root = document.getElementById('root');
+    if (root) {
+        render(<App />, root);
+    }
+}
diff --git a/hono-bun-jsx/src/index.tsx b/hono-bun-jsx/src/index.tsx
@@ -0,0 +1,27 @@
+import { Hono } from 'hono';
+import { serveStatic } from 'hono/bun';
+import {App} from "./App";
+
+const app = new Hono();
+
+app.use('/static/*', serveStatic({ root: './' }));
+
+app.get('/hello', (c) => c.text('You can access: /static/hello.txt'))
+
+
+app.get('/', (c) => {
+    return c.html(
+        <html>
+        <body>
+        <div id="root">
+            <App /> {/* Render the App component on the server */}
+        </div>
+        <script src="/static/App.js" type="module"></script>
+        </body>
+        </html>
+    );
+});
+
+app.get('*', serveStatic({ path: './static/fallback.txt' }));
+
+export default app;
diff --git a/hono-bun-jsx/static/fallback.txt b/hono-bun-jsx/static/fallback.txt
@@ -0,0 +1 @@
+Error on page. Hold your horses.
diff --git a/hono-bun-jsx/static/hello.txt b/hono-bun-jsx/static/hello.txt
@@ -0,0 +1 @@
+Hello from the static folder!
diff --git a/hono-bun-jsx/tsconfig.json b/hono-bun-jsx/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx"
+  }
+}