├── .gitignore ├── LICENSE ├── README.md ├── deno.jsonc ├── main.ts └── routes ├── another_route.tsx └── index.tsx /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .idea 3 | 4 | deno.lock -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2022 LePichu 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Basic FS Routing with Deno and Hono 2 | ![The Stack - Graphic Art by LePichu](https://repository-images.githubusercontent.com/632001011/44d80a85-57be-4ec0-a46c-4b636760116e) 3 | --- 4 | This is a Demo demonstrating how to use the [Hono](https://hono.dev/) to make a basic SSR (Server Side Rendering) application with [Deno](https://deno.land/) and [Preact](https://preactjs.com/), tho the same technique can be applied to any framework, may or may not require a buildstep. 5 | 6 | ## How to run 7 | Run `deno run --allow-net --allow-read main.ts` to start the server, then navigate to `localhost:3000` to see the app. 8 | 9 | ## License 10 | `fs-routing-deno` is licensed under MIT License, see [LICENSE](./LICENSE) for more information. 11 | -------------------------------------------------------------------------------- /deno.jsonc: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react-jsx", 4 | "jsxImportSource": "https://esm.sh/preact@10.11.0" 5 | }, 6 | "fmt": { 7 | "options": { 8 | "indentWidth": 4, 9 | "lineWidth": 80, 10 | "semiColons": false, 11 | "singleQuote": false, 12 | "useTabs": true 13 | } 14 | }, 15 | "imports": { 16 | "hono": "https://deno.land/x/hono@v3.1.6/mod.ts", 17 | "preact-render-to-string": "https://esm.sh/preact-render-to-string@6.0.2" 18 | } 19 | } -------------------------------------------------------------------------------- /main.ts: -------------------------------------------------------------------------------- 1 | import { Hono } from "hono" 2 | import { serve } from "https://deno.land/std@0.184.0/http/server.ts" 3 | import { renderToString } from "preact-render-to-string" 4 | 5 | const app = new Hono() 6 | 7 | const map = new Map() 8 | 9 | const files = Deno.readDirSync("./routes") 10 | for (const file of files) { 11 | if (file.isFile && file.name.endsWith(".tsx")) { 12 | if (file.name === "index.tsx") { 13 | map.set("/", `./routes/${file.name}`) 14 | } else { 15 | map.set(`/${file.name.replace(".tsx", "")}`, `./routes/${file.name}`) 16 | } 17 | } 18 | } 19 | 20 | app.get("*", async (ctx) => { 21 | if(map.has(ctx.req.path)) { 22 | const module = await import(map.get(ctx.req.path)) 23 | if(module.default) return ctx.html(` 24 | 25 | ${renderToString(module.default())} 26 | 27 | `) 28 | } 29 | 30 | return ctx.html("

Meow.

") 31 | }) 32 | 33 | serve(app.fetch, { 34 | port: 8000, 35 | onListen: () => console.log("Listening on http://localhost:8000/"), 36 | }) 37 | -------------------------------------------------------------------------------- /routes/another_route.tsx: -------------------------------------------------------------------------------- 1 | export default function() { 2 | return ( 3 |
4 |

Another Route

5 |
6 | ) 7 | } -------------------------------------------------------------------------------- /routes/index.tsx: -------------------------------------------------------------------------------- 1 | export default function() { 2 | return ( 3 |

Hello World!

4 | ) 5 | } --------------------------------------------------------------------------------