Bun has a built-in web server. However, handling requests with that web server is very rudimentary. So, I wanted to to create a simpler file-based routing system.
Initial approach
My initial approach was to require every file in the pages
folder as a module.
While this worked for basic cases, it did not work for URLs with nested levels like /js/intro
.
Slightly better approach
I then thought to replace any /
with a specific character or set of characters like _____
. However, if a user uses _____
in their path, this would return the equivalent but with /
. Running a separate script to import all pages also didn't look clean.
The solution
I opened Bun's website and saw that they have an example called "File system routing". The example showed me that this was exactly what I wanted.
My final code looked like this:
const router = new Bun.FileSystemRouter({
style: "nextjs",
dir: "./pages/",
});
Bun.serve({
fetch(req) {
let match = router.match(req);
let page = require(match.filePath);
return new (page)(req, match.query, match.params);
},
});