├── .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<ishatgupta56@gmail.com>
 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 |             <body>
25 |                 ${renderToString(module.default())}
26 |             </body>
27 |         `)   
28 |     }
29 | 
30 |     return ctx.html("<h1>Meow.</h1>")
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 |         <div>
4 |             <h1>Another Route</h1>
5 |         </div>
6 |     )
7 | }


--------------------------------------------------------------------------------
/routes/index.tsx:
--------------------------------------------------------------------------------
1 | export default function() {
2 |     return (
3 |         <h1>Hello World!</h1>
4 |     )
5 | }


--------------------------------------------------------------------------------