It works!

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

hello.txt
data.json

\n \n\n",[192,112,83],"dd544eaa-2fd5-11f1-9f1f-42dde27851f2",["D",1775273101296],"Hello from Val Town static files!",[192,112,69],"e0cac62c-2fd5-11f1-b11f-42dde27851f2",["D",1775273107101],"{ \"message\": \"JSON served via serveStatic\", \"ok\": true }",[192,112,101],"e1f8c012-2fd5-11f1-b11f-42dde27851f2",["D",1775273109061],"const msg: string = \"TypeScript transpiled and served correctly!\";\nconsole.log(msg);\ndocument.querySelector(\"body\")?.insertAdjacentHTML(\n \"beforeend\",\n `

${msg}

`,\n);",[192,112,110],"pulls","branches","forks","envVars",{"_226":26,"_228":26},"connections",{"_226":26,"_227":26},"count","unfilledCount","emptyCount",{"_37":284,"_13":192,"_67":187,"_47":-5,"_39":40,"_189":285,"_199":24,"_41":286,"_43":26,"_70":113,"_186":-5,"_71":30,"_190":-5,"_246":287,"_17":288},{"_37":185,"_13":112,"_67":111,"_47":187,"_39":40,"_189":44,"_199":24,"_41":281,"_43":26,"_70":113,"_186":-5,"_71":30,"_190":-5,"_246":282,"_17":283},{"_37":215,"_13":110,"_67":109,"_47":111,"_39":40,"_189":104,"_199":24,"_41":278,"_43":26,"_70":21,"_186":217,"_71":30,"_190":-5,"_246":279,"_17":280},{"_37":211,"_13":101,"_67":100,"_47":111,"_39":40,"_189":95,"_199":24,"_41":275,"_43":26,"_70":21,"_186":213,"_71":30,"_190":-5,"_246":276,"_17":277},{"_37":207,"_13":69,"_67":68,"_47":111,"_39":40,"_189":44,"_199":24,"_41":272,"_43":26,"_70":21,"_186":209,"_71":30,"_190":-5,"_246":273,"_17":274},{"_37":203,"_13":83,"_67":82,"_47":111,"_39":40,"_189":77,"_199":24,"_41":269,"_43":26,"_70":21,"_186":205,"_71":30,"_190":-5,"_246":270,"_17":271},{"_37":198,"_13":92,"_67":91,"_47":111,"_39":40,"_189":86,"_199":24,"_41":266,"_43":26,"_70":21,"_186":201,"_71":30,"_190":-5,"_246":267,"_17":268},{"_37":256,"_13":257,"_67":258,"_47":187,"_39":40,"_189":259,"_199":24,"_41":260,"_43":261,"_70":262,"_186":263,"_71":30,"_190":-5,"_246":264,"_17":265},{"_37":249,"_13":250,"_67":251,"_47":-5,"_39":40,"_189":150,"_199":24,"_41":252,"_43":130,"_70":21,"_186":253,"_71":30,"_190":-5,"_246":254,"_17":255},{"_37":239,"_13":240,"_67":241,"_47":-5,"_39":40,"_189":242,"_199":24,"_41":243,"_43":86,"_70":244,"_186":245,"_71":30,"_190":-5,"_246":247,"_17":248},"bf81444a-2fd6-11f1-a97d-42dde27851f2","main.ts","27ee61fa-2fd4-11f1-b632-42dde27851f2",16,["D",1775273480706],"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 console.log(normalizedPath);\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};","children",[],[240],"13bb030c-30fe-11f1-a0b3-42dde27851f2","README.md","0e3bb6d4-2fd6-11f1-8c61-42dde27851f2",["D",1775400323592],"# vt-hono-serve-static\n\nA Val Town adapter for Hono's `serveStatic` middleware. Lets you use the\nstandard Hono `serveStatic` API — the same one used on Deno, Bun, Node, and\nCloudflare Workers — to serve static files from your val's project files.\n\n## Why?\n\nHono's built-in `serveStatic` middleware requires filesystem access\n(`Deno.open`, `node:fs`, etc.), which Val Town doesn't provide. The existing\n`std/utils` provides `staticHTTPServer()` and `serveFile()`, but these don't\nintegrate with Hono's middleware system.\n\nThis adapter bridges that gap — you get the full `serveStatic` API (`root`,\n`path`, `rewriteRequestPath`, `onFound`, `onNotFound`, `mimes`, etc.) working\nnatively 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-serve-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(\n \"/assets/*\",\n serveStatic({\n root: \"./\",\n rewriteRequestPath: (path) => path.replace(/^\\/assets/, \"/frontend\"),\n }),\n);\n\n// Callbacks for cache headers or debugging\napp.use(\n \"/static/*\",\n 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);\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n```\n\n## Options\n\nAll standard\n[Hono `ServeStaticOptions`](https://hono.dev/docs/getting-started/deno#serve-static-files)\nare 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\n`serveStatic`:\n\n- **`getContent(path)`** — Fetches file content from your val via `esm.town`\n using `std/utils`. TypeScript/TSX/JSX files are automatically transpiled to\n JavaScript.\n- **`isDir(path)`** — Heuristic check (paths without a file extension are\n treated as directories, triggering `index.html` fallback).\n- **`join(...paths)`** — Simple URL-style path concatenation (no filesystem\n needed).\n\n## Limitations\n\n- **Text files only.** Binary files (images, fonts, WASM, etc.) will be\n corrupted because `std/utils` reads all files as UTF-8 text via `res.text()`.\n Use external URLs, inline SVG, or icon fonts for images. This matches the\n current `std/utils` limitation.\n- **`precompressed` is a no-op.** Val Town doesn't store `.br`/`.gz` file\n variants, so the option is accepted but has no effect.\n- **No filesystem directories.** The `isDir` check uses a heuristic (no file\n extension = directory). Extensionless files like `LICENSE` or `Makefile` would\n be incorrectly treated as directories.",[],[250],"ca2ebc4c-2fd6-11f1-b239-42dde27851f2","server.ts","e6d1eed8-2fd5-11f1-b11f-42dde27851f2",19,["D",1775273498667],3,"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;",[],[192,257],["D",1775273105839],[],[192,112,92],["D",1775273104656],[],[192,112,83],["D",1775273101296],[],[192,112,69],["D",1775273107101],[],[192,112,101],["D",1775273109061],[],[192,112,110],["D",1775273101296],[231,232,233,234,235],[192,112],"d9f4b664-2fd5-11f1-9f1f-42dde27851f2",4,["D",1775273095638],[230,236],[192],["D",1775272367449],{"_11":12,"_163":74},{"_11":12,"_159":-5,"_73":74,"_31":72,"_160":161,"_162":30},{"_43":150,"_13":16,"_37":40,"_151":115,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":-5,"_157":14,"_158":12},"ctx",{"_57":-5,"_182":326,"_327":328,"_329":330,"_331":30,"_332":30,"_333":30,"_334":24,"_335":-5,"_336":-7,"_337":-7,"_338":26,"_339":30,"_340":30,"_341":-5,"_342":30,"_343":30,"_344":30,"_345":-5},"ENV",{"_297":298,"_299":300,"_301":16,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325},"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"]

History · static