[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_243":244,"_245":246},"routes/_app.x.$handle.$name",{"_98":97,"_37":48,"_106":88,"_32":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_26":-5,"_118":-5,"_119":-5,"_120":30,"_121":122,"_123":124,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_46":47,"_37":48,"_41":49,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":-5,"_60":30,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":30},"version",15,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","ef4a23c1-904e-4d4c-b0bb-13c90b60e504","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":26,"_39":40,"_41":42,"_43":14,"_44":45,"_29":30},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","0e3bb6d4-2fd6-11f1-8c61-42dde27851f2","name","fileType","content","# vt-hono-server-static\n\nA Val Town adapter for Hono's `serveStatic` middleware. Lets you use the standard Hono `serveStatic` API — the same one used on Deno, Bun, Node, and Cloudflare Workers — to serve static files from your val's project files.\n\n## Why?\n\nHono's built-in `serveStatic` middleware requires filesystem access (`Deno.open`, `node:fs`, etc.), which Val Town doesn't provide. The existing `std/utils` provides `staticHTTPServer()` and `serveFile()`, but these don't integrate with Hono's middleware system.\n\nThis adapter bridges that gap — you get the full `serveStatic` API (`root`, `path`, `rewriteRequestPath`, `onFound`, `onNotFound`, `mimes`, etc.) working natively on Val Town.\n\n## Usage\n\n```ts\nimport { Hono } from \"npm:hono@4\";\nimport { serveStatic } from \"https://esm.town/v/nbbaier/vt-hono-server-static/main.ts\";\n\nconst app = new Hono();\n\n// Serve files under /static/* from the project root\napp.use(\"/static/*\", serveStatic({ root: \"./\" }));\n\n// Serve a specific file at a fixed path\napp.use(\"/favicon.ico\", serveStatic({ path: \"./favicon.ico\" }));\n\n// Rewrite request paths (e.g., /assets/* → /frontend/*)\napp.use(\"/assets/*\", serveStatic({\n root: \"./\",\n rewriteRequestPath: (path) => path.replace(/^\\/assets/, \"/frontend\"),\n}));\n\n// Callbacks for cache headers or debugging\napp.use(\"/static/*\", serveStatic({\n root: \"./\",\n onFound: (path, c) => {\n c.header(\"Cache-Control\", \"public, max-age=3600\");\n },\n onNotFound: (path, c) => {\n console.log(`${path} not found, requested ${c.req.path}`);\n },\n}));\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n```\n\n## Options\n\nAll standard [Hono `ServeStaticOptions`](https://hono.dev/docs/getting-started/deno#serve-static-files) are supported:\n\n| Option | Type | Description |\n|---|---|---|\n| `root` | `string` | Root directory for file resolution (e.g., `\"./\"`, `\"./frontend\"`) |\n| `path` | `string` | Serve a specific file regardless of request path |\n| `rewriteRequestPath` | `(path: string) => string` | Transform the request path before file lookup |\n| `mimes` | `Record` | Additional MIME type mappings |\n| `onFound` | `(path: string, c: Context) => void` | Called when a file is found |\n| `onNotFound` | `(path: string, c: Context) => void` | Called when a file is not found |\n| `precompressed` | `boolean` | Check for `.br`/`.gz` variants (no-op on Val Town) |\n\nPlus one Val Town-specific option:\n\n| Option | Type | Description |\n|---|---|---|\n| `metaImportUrl` | `string` | Override `import.meta.url` for resolving files from a different val |\n\n## How It Works\n\n```mermaid\ngraph LR\n A[Hono Request] --> B[serveStatic middleware]\n B --> C[baseServeStatic
hono/serve-static]\n C --> D{getContent}\n D -->|.ts/.tsx/.jsx| E[readFileTranspiled
std/utils]\n D -->|other files| F[readFile
std/utils]\n E --> G[esm.town API]\n F --> G\n G --> H[Response with
Content-Type]\n```\n\nThis adapter provides three platform-specific hooks to Hono's base `serveStatic`:\n\n- **`getContent(path)`** — Fetches file content from your val via `esm.town` using `std/utils`. TypeScript/TSX/JSX files are automatically transpiled to JavaScript.\n- **`isDir(path)`** — Heuristic check (paths without a file extension are treated as directories, triggering `index.html` fallback).\n- **`join(...paths)`** — Simple URL-style path concatenation (no filesystem needed).\n\n## Limitations\n\n- **Text files only.** Binary files (images, fonts, WASM, etc.) will be corrupted because `std/utils` reads all files as UTF-8 text via `res.text()`. Use external URLs, inline SVG, or icon fonts for images. This matches the current `std/utils` limitation.\n- **`precompressed` is a no-op.** Val Town doesn't store `.br`/`.gz` file variants, so the option is accepted but has no effect.\n- **No filesystem directories.** The `isDir` check uses a heuristic (no file extension = directory). Extensionless files like `LICENSE` or `Makefile` would be incorrectly treated as directories.\n","createdAt",["D",1775273183341],"branchVersion","branchId","27ec018a-2fd4-11f1-b632-42dde27851f2","id","27eb4182-2fd4-11f1-b632-42dde27851f2","vt-hono-serve-static",["D",1775272367449],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A Val Town adapter for Hono's serveStatic middleware","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_19":58,"_102":103,"_104":30},"branch",{"_13":87,"_37":88,"_46":45,"_89":47,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":48,"_96":97},"isOwned",20,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_46":47,"_37":48,"_41":239,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":-5,"_60":30,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":240,"_82":241,"_84":242,"_86":30},"tree",[165,173,174],"files",[165,166,167,168,169,170,171,172,173,174],"counts",{"_155":146,"_156":64,"_157":146,"_158":159,"_160":161},"contents",[129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_46":148,"_37":149,"_35":150,"_135":-5,"_44":45,"_43":151,"_137":124,"_41":152,"_13":146,"_38":153,"_39":-5,"_29":30,"_142":-5,"_32":154},{"_46":144,"_37":33,"_35":36,"_135":-5,"_44":45,"_43":14,"_137":30,"_41":145,"_13":146,"_38":26,"_39":40,"_29":30,"_142":-5,"_32":147},{"_46":132,"_37":133,"_35":134,"_135":-5,"_44":45,"_43":136,"_137":30,"_41":138,"_13":139,"_38":140,"_39":141,"_29":30,"_142":-5,"_32":143},"e57a181c-2fd5-11f1-9336-42dde27851f2","main.ts","27ee61fa-2fd4-11f1-b632-42dde27851f2","parentId",13,"latest",["D",1775273114962],6,"script","import type { ServeStaticOptions } from \"npm:hono@4/serve-static\";\nimport { serveStatic as baseServeStatic } from \"npm:hono@4/serve-static\";\nimport type { Env, MiddlewareHandler } from \"npm:hono@4/types\";\nimport { getContentType } from \"https://esm.town/v/std/utils/serve-file.ts\";\nimport {\n readFile,\n readFileTranspiled,\n} from \"https://esm.town/v/std/utils/file.ts\";\n\n/**\n * Val Town adapter for Hono's serveStatic middleware.\n *\n * Serves static files from your val's project files using the same API\n * as `hono/deno`, `hono/bun`, etc.\n *\n * @example\n * ```ts\n * import { Hono } from \"npm:hono@4\";\n * import { serveStatic } from \"https://esm.town/v/nbbaier/vt-hono-server-static/main.ts\";\n *\n * const app = new Hono();\n * app.use(\"/static/*\", serveStatic({ root: \"./\" }));\n * app.use(\"/favicon.ico\", serveStatic({ path: \"./favicon.ico\" }));\n * export default app.fetch;\n * ```\n */\nexport const serveStatic = (\n options: ServeStaticOptions & {\n /**\n * Override the import.meta.url used to resolve val files.\n * Defaults to `Deno.env.get(\"VALTOWN_ENTRYPOINT\")`.\n * Useful when serving files from a different val.\n */\n metaImportUrl?: string;\n },\n): MiddlewareHandler => {\n const { metaImportUrl, ...restOptions } = options;\n\n return async function serveStatic(c, next) {\n const getContent = async (path: string) => {\n // Normalize: strip leading \"./\" and ensure leading \"/\"\n const normalizedPath = \"/\" + path.replace(/^\\.?\\//, \"\");\n\n try {\n const needsTranspile = /\\.(tsx?|jsx)$/.test(normalizedPath);\n const content = needsTranspile\n ? await readFileTranspiled(normalizedPath, metaImportUrl)\n : await readFile(normalizedPath, metaImportUrl);\n\n if (content === undefined) return null;\n\n return new Response(content, {\n headers: { \"Content-Type\": getContentType(normalizedPath) },\n });\n } catch (err: any) {\n if (err.message?.includes(\"File not found\")) {\n return null;\n }\n throw err;\n }\n };\n\n const isDir = (path: string) => {\n const lastSegment = path.split(\"/\").filter(Boolean).pop() || \"\";\n return !lastSegment.includes(\".\");\n };\n\n const join = (...paths: string[]) => {\n return (\"/\" + paths.join(\"/\")).replace(/\\/+/g, \"/\").replace(/\\/$/, \"\") ||\n \"/\";\n };\n\n return baseServeStatic({\n ...restOptions,\n getContent,\n isDir,\n join,\n })(c, next);\n };\n};","label",[133],"0e3bb616-2fd6-11f1-8c61-42dde27851f2",["D",1775273183341],0,[33],"d9f4b664-2fd5-11f1-9f1f-42dde27851f2","test","d9f4b70e-2fd5-11f1-9f1f-42dde27851f2",4,["D",1775273095638],"directory",[149],"pulls","branches","forks","envVars",{"_162":146,"_164":146},"connections",{"_162":146,"_163":146},"count","unfilledCount","emptyCount",{"_46":148,"_37":149,"_35":150,"_135":-5,"_44":45,"_43":151,"_137":124,"_41":236,"_13":146,"_38":153,"_39":-5,"_29":30,"_142":-5,"_176":237,"_32":238},{"_46":232,"_37":200,"_35":194,"_135":150,"_44":45,"_43":211,"_137":124,"_41":233,"_13":146,"_38":153,"_39":-5,"_29":30,"_142":-5,"_176":234,"_32":235},{"_46":224,"_37":225,"_35":226,"_135":194,"_44":45,"_43":227,"_137":124,"_41":228,"_13":146,"_38":26,"_39":229,"_29":30,"_142":-5,"_176":230,"_32":231},{"_46":216,"_37":217,"_35":218,"_135":194,"_44":45,"_43":219,"_137":124,"_41":220,"_13":146,"_38":26,"_39":221,"_29":30,"_142":-5,"_176":222,"_32":223},{"_46":208,"_37":209,"_35":210,"_135":194,"_44":45,"_43":211,"_137":124,"_41":212,"_13":146,"_38":26,"_39":213,"_29":30,"_142":-5,"_176":214,"_32":215},{"_46":201,"_37":202,"_35":203,"_135":194,"_44":45,"_43":139,"_137":124,"_41":204,"_13":146,"_38":26,"_39":205,"_29":30,"_142":-5,"_176":206,"_32":207},{"_46":191,"_37":192,"_35":193,"_135":194,"_44":45,"_43":195,"_137":124,"_41":196,"_13":146,"_38":26,"_39":197,"_29":30,"_142":-5,"_176":198,"_32":199},{"_46":182,"_37":183,"_35":184,"_135":150,"_44":45,"_43":185,"_137":30,"_41":186,"_13":146,"_38":187,"_39":188,"_29":30,"_142":-5,"_176":189,"_32":190},{"_46":144,"_37":33,"_35":36,"_135":-5,"_44":45,"_43":14,"_137":30,"_41":179,"_13":146,"_38":26,"_39":40,"_29":30,"_142":-5,"_176":180,"_32":181},{"_46":132,"_37":133,"_35":134,"_135":-5,"_44":45,"_43":136,"_137":30,"_41":175,"_13":139,"_38":140,"_39":141,"_29":30,"_142":-5,"_176":177,"_32":178},["D",1775273114962],"children",[],[133],["D",1775273183341],[],[33],"e6d1ee10-2fd5-11f1-b11f-42dde27851f2","server.ts","e6d1eed8-2fd5-11f1-b11f-42dde27851f2",14,["D",1775273117212],"http","import { Hono } from \"npm:hono@4\";\nimport { serveStatic } from \"../main.ts\";\n\nconst app = new Hono();\n\n// Serve static files under /static/* from test/static/\napp.use(\n \"/static/*\",\n serveStatic({\n root: \"./test\",\n rewriteRequestPath: (path) => path,\n }),\n);\n\n// Serve index.html at root\napp.get(\"/\", serveStatic({ path: \"./test/static/index.html\" }));\n\n// API route to prove middleware doesn't interfere\napp.get(\"/api/health\", (c) => c.json({ status: \"ok\" }));\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n",[],[149,183],"e0098c78-2fd5-11f1-a1aa-42dde27851f2","style.css","e0098d5e-2fd5-11f1-a1aa-42dde27851f2","c0621f58-e2e6-4b4c-8689-ee3553605f9f",7,["D",1775273105839],"body {\n font-family: system-ui, sans-serif;\n max-width: 600px;\n margin: 2rem auto;\n padding: 0 1rem;\n color: #333;\n}\nh1 { color: #6366f1; }",[],[149,200,192],"static","df54b10e-2fd5-11f1-9f1f-42dde27851f2","index.html","df54b1c2-2fd5-11f1-9f1f-42dde27851f2",["D",1775273104656],"\n\n\n \n serveStatic Test\n \n\n\n

It works!

This page is served by Hono's serveStatic middleware on Val Town.

hello.txt
data.json

\n \n\n",[],[149,200,202],"dd544eaa-2fd5-11f1-9f1f-42dde27851f2","hello.txt","dd544f7c-2fd5-11f1-9f1f-42dde27851f2",5,["D",1775273101296],"Hello from Val Town static files!",[],[149,200,209],"e0cac62c-2fd5-11f1-b11f-42dde27851f2","data.json","e0cac744-2fd5-11f1-b11f-42dde27851f2",8,["D",1775273107101],"{ \"message\": \"JSON served via serveStatic\", \"ok\": true }",[],[149,200,217],"e1f8c012-2fd5-11f1-b11f-42dde27851f2","app.ts","e1f8c0a8-2fd5-11f1-b11f-42dde27851f2",9,["D",1775273109061],"const msg: string = \"TypeScript transpiled and served correctly!\";\nconsole.log(msg);\ndocument.querySelector(\"body\")?.insertAdjacentHTML(\n \"beforeend\",\n `

${msg}

`,\n);",[],[149,200,225],"dd546e9e-2fd5-11f1-9f1f-42dde27851f2",["D",1775273101296],[167,168,169,170,171],[149,200],["D",1775273095638],[166,172],[149],["D",1775272367449],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_19":58,"_102":103,"_104":30},{"_13":87,"_37":88,"_46":45,"_89":47,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":48,"_96":97},"ctx",{"_80":-5,"_126":276,"_277":278,"_279":280,"_281":30,"_282":30,"_283":30,"_284":124,"_285":-5,"_286":-7,"_287":-7,"_288":146,"_289":30,"_290":30,"_291":-5,"_292":30,"_293":30,"_294":30,"_295":-5},"ENV",{"_247":248,"_249":250,"_251":88,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v15