feat: initial demo code

LePichu · Apr 24, 2023 · 42516f4 · 42516f4
commit 42516f4
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.vscode
+.idea
+
+deno.lock
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# Basic FS Routing with Deno and Hono
+---
+This is a Demo demonstrating how to use the [Hono](https://hono.dev/) to make a basic SSR (Server Side Rendering) application with Deno and Preact, tho the same technique can be applied to any framework, may or may not require a buildstep.
+
+## How to run
+Run `deno run --allow-net --allow-read --unstable server.ts` to start the server, then navigate to `localhost:3000` to see the app.
+
+## License
+This demo is licensed under [MIT License](https://choosealicense.com/licenses/mit/) with the holder "LePichu".
diff --git a/deno.jsonc b/deno.jsonc
@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "jsxImportSource": "https://esm.sh/[email protected]"
+    },
+    "fmt": {
+        "options": {
+            "indentWidth": 4,
+            "lineWidth": 80,
+            "semiColons": false,
+            "singleQuote": false,
+            "useTabs": true
+        }
+    },
+    "imports": {
+        "hono": "https://deno.land/x/[email protected]/mod.ts",
+        "preact-render-to-string": "https://esm.sh/[email protected]"
+    }
+}
diff --git a/main.ts b/main.ts
@@ -0,0 +1,36 @@
+import { Hono } from "hono"
+import { serve } from "https://deno.land/[email protected]/http/server.ts"
+import { renderToString } from "preact-render-to-string"
+
+const app = new Hono()
+
+const map = new Map()
+
+const files = Deno.readDirSync("./routes")
+for (const file of files) {
+	if (file.isFile && file.name.endsWith(".tsx")) {
+		if (file.name === "index.tsx") {
+			map.set("/", `./routes/${file.name}`)
+		} else {
+			map.set(`/${file.name.replace(".tsx", "")}`, `./routes/${file.name}`)
+		}
+	}
+}
+
+app.get("*", async (ctx) => {
+	if(map.has(ctx.req.path)) {
+        const module = await import(map.get(ctx.req.path))
+        if(module.default) return ctx.html(`
+            <body>
+                ${renderToString(module.default())}
+            </body>
+        `)   
+    }
+
+    return ctx.html("<h1>Meow.</h1>")
+})
+
+serve(app.fetch, {
+	port: 8000,
+	onListen: () => console.log("Listening on http://localhost:8000/"),
+})
diff --git a/routes/another_route.tsx b/routes/another_route.tsx
@@ -0,0 +1,7 @@
+export default function() {
+    return (
+        <div>
+            <h1>Another Route</h1>
+        </div>
+    )
+}
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -0,0 +1,5 @@
+export default function() {
+    return (
+        <h1>Hello World!</h1>
+    )
+}