\n \n \n",[18,167],"e2e715b8-f486-11ef-b1d7-569c3dd06744","favicon.svg","61497137-c777-4be7-86ba-f1f4034e18a4",["D",1740604564126],"",[18,173],"e2e6fed4-f486-11ef-b1d7-569c3dd06744","components","9560b320-5128-4628-a889-aba55376bc79",["D",1740604564126],[18,179],"pulls","branches","forks","envVars",{"_190":26,"_192":26},"connections",{"_190":26,"_191":26},"count","unfilledCount","emptyCount",{"_38":284,"_13":276,"_32":268,"_138":-5,"_139":81,"_140":56,"_141":24,"_40":285,"_79":26,"_34":35,"_143":-5,"_36":30,"_144":-5,"_213":286,"_17":287},{"_38":277,"_13":208,"_32":278,"_138":268,"_139":81,"_140":279,"_141":24,"_40":280,"_79":56,"_34":21,"_143":281,"_36":30,"_144":-5,"_213":282,"_17":283},{"_38":265,"_13":266,"_32":267,"_138":268,"_139":81,"_140":269,"_141":24,"_40":270,"_79":271,"_34":272,"_143":273,"_36":30,"_144":-5,"_213":274,"_17":275},{"_38":137,"_13":18,"_32":33,"_138":-5,"_139":81,"_140":56,"_141":24,"_40":262,"_79":26,"_34":35,"_143":-5,"_36":30,"_144":-5,"_213":263,"_17":264},{"_38":178,"_13":179,"_32":180,"_138":33,"_139":81,"_140":56,"_141":24,"_40":259,"_79":26,"_34":35,"_143":-5,"_36":30,"_144":-5,"_213":260,"_17":261},{"_38":250,"_13":251,"_32":252,"_138":180,"_139":81,"_140":253,"_141":24,"_40":254,"_79":255,"_34":163,"_143":256,"_36":30,"_144":-5,"_213":257,"_17":258},{"_38":242,"_13":243,"_32":244,"_138":180,"_139":81,"_140":245,"_141":24,"_40":246,"_79":162,"_34":163,"_143":247,"_36":30,"_144":-5,"_213":248,"_17":249},{"_38":172,"_13":173,"_32":174,"_138":33,"_139":81,"_140":56,"_141":24,"_40":239,"_79":26,"_34":21,"_143":176,"_36":30,"_144":-5,"_213":240,"_17":241},{"_38":166,"_13":167,"_32":168,"_138":33,"_139":81,"_140":56,"_141":24,"_40":236,"_79":26,"_34":21,"_143":170,"_36":30,"_144":-5,"_213":237,"_17":238},{"_38":157,"_13":158,"_32":159,"_138":33,"_139":81,"_140":160,"_141":24,"_40":233,"_79":162,"_34":163,"_143":164,"_36":30,"_144":-5,"_213":234,"_17":235},{"_38":151,"_13":152,"_32":153,"_138":33,"_139":81,"_140":56,"_141":24,"_40":230,"_79":26,"_34":21,"_143":155,"_36":30,"_144":-5,"_213":231,"_17":232},{"_38":226,"_13":225,"_32":219,"_138":-5,"_139":81,"_140":56,"_141":24,"_40":227,"_79":26,"_34":35,"_143":-5,"_36":30,"_144":-5,"_213":228,"_17":229},{"_38":216,"_13":217,"_32":218,"_138":219,"_139":81,"_140":220,"_141":24,"_40":221,"_79":56,"_34":163,"_143":222,"_36":30,"_144":-5,"_213":223,"_17":224},{"_38":207,"_13":208,"_32":209,"_138":-5,"_139":81,"_140":80,"_141":24,"_40":210,"_79":211,"_34":21,"_143":212,"_36":30,"_144":-5,"_213":214,"_17":215},"ee82f41a-f48a-11ef-8e85-569c3dd06744","README.md","05f8eb75-d66b-434f-8d60-6384f35bf05f",["D",1740606301591],6,"# Download Projects as a Zip\n\nThis is a proof of concept, showing how to download Val Town projects as zip files. For now, I've hardcoded my username into the code, so you can only download my public/unlisted projects. To see it working, type the name of this project **getProjectsAsZips** and press download. Waalaah!\n\nIf you fork this project, you can update the hardcoded username in frontend/MessageInput.tsx. I forked the [reactHonoStarter](https://www.val.town/x/stevekrouse/reactHonoStarter) to get started quickly (it's great), hence the weird naming and leftover code you'll see around this project.\n\n## Next Steps\nI'd love it if someone wanted to send me a PR and tackle either of these two:\n\n1. Add ability for users to input their own username\n2. Add ability for users to input their API token so they can see private projects","children",[],[208],"453ae468-f489-11ef-8216-569c3dd06744","utils.ts","410f1727-869c-46d1-bb02-1edf3dce59f9","70d331d7-a590-4e61-896d-8cb555c7aa53",27,["D",1740605588090],"// LEFTOVER FROM TEMPLATE, NOT USED\nexport interface Message {\n content: string;\n}\n\nexport const MESSAGE_LIMIT = 5;",[],[225,217],"shared","e2e7201c-f486-11ef-b1d7-569c3dd06744",["D",1740604564126],[205],[225],["D",1740604564126],[],[18,152],["D",1740605541575],[],[18,158],["D",1740604564126],[],[18,167],["D",1740604564126],[],[18,173],"dee54540-f489-11ef-a0d2-569c3dd06744","MessageInput.tsx","2b7b2e94-511a-4601-87ce-8775bc07102d",31,["D",1740605845895],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../shared/types.ts\";\n\nexport function MessageInput({ onSubmit }: { onSubmit: () => void }) {\n const [message, setMessage] = React.useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!message.trim()) return;\n\n try {\n const username = \"shouser\"; // PUT YOUR USERNAME HERE\n const projectName = message.trim();\n const response = await fetch(\n `/zip-project?username=${encodeURIComponent(username)}&projectName=${encodeURIComponent(projectName)}`,\n {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n\n if (response.ok) {\n const blob = await response.blob();\n const url = URL.createObjectURL(blob);\n\n const downloadLink = document.createElement(\"a\");\n downloadLink.href = url;\n downloadLink.download = `${projectName}.zip`;\n document.body.appendChild(downloadLink);\n downloadLink.click();\n document.body.removeChild(downloadLink);\n\n setTimeout(() => {\n URL.revokeObjectURL(url);\n }, 100);\n\n onSubmit();\n setMessage(\"\");\n }\n } catch (error) {\n console.error(\"Download failed\", error);\n }\n };\n\n return (\n

\n setMessage(e.target.value)}\n placeholder=\"Type a project name...\"\n />\n \n \n );\n}",[],[18,179,243],"f09566e0-f488-11ef-84bd-569c3dd06744","App.tsx","1db7cb6a-ad93-4157-acd7-5996b59e8962",23,["D",1740605446073],14,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n return (\n

Get Sophie's Project

\n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}",[],[18,179,251],["D",1740604564126],[198,199],[18,179],["D",1740604564126],[197,200,201,202,203],[18],"5fa7d3b6-f488-11ef-a715-569c3dd06744","index.ts","67ed02fe-1155-437e-b437-6d39b9d381f6","bd68da87-9c83-41ff-8932-e4e9a0bdeb69",15,["D",1740605202928],7,"http","import { parseProject } from \"https://esm.town/v/std/parseImportMeta@149-main/project\";\nimport { readFile, servePublicFile } from \"https://esm.town/v/stevekrouse/utils@187-main/serve-public/index.ts\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono\";\nimport JSZip from \"npm:jszip\";\n\nconst app = new Hono();\nconst vt = new ValTown();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n return c.html(html);\n});\n\n// Serve all /frontend files under /public\napp.get(\"/public/**/*\", c => servePublicFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", c => servePublicFile(c.req.path, import.meta.url));\n\napp.post(\"/zip-project\", async (c) => {\n try {\n const username = c.req.query(\"username\");\n const projectName = c.req.query(\"projectName\");\n\n if (!username || !projectName) {\n return c.json({\n success: false,\n error: \"Missing required parameters: username and projectName\",\n }, 400);\n }\n\n const projectDetails = await vt.alias.username.projectName.retrieve(username, projectName);\n\n if (!projectDetails || !projectDetails.id) {\n return c.json({\n success: false,\n error: \"Project not found\",\n }, 404);\n }\n\n const projectId = projectDetails.id;\n const files = await vt.projects.files.list(projectId, { recursive: true });\n const filesWithContent = await getFilesWithContent(files.body.data, projectId);\n const zipBuffer = await createZipFromEndpoints(filesWithContent, `${projectName}.zip`);\n\n c.header(\"Content-Type\", \"application/zip\");\n c.header(\"Content-Disposition\", `attachment; filename=\"${projectName}.zip\"`);\n\n // Return the ZIP file directly\n return c.body(zipBuffer, 200);\n } catch (error) {\n console.error(\"Error retrieving project files:\", error);\n return c.json({\n success: false,\n error: error,\n }, 500);\n }\n});\n\nasync function getFilesWithContent(files: any[], projectId) {\n const nonDirectoryFiles = files.filter(file => file.type !== \"directory\");\n\n const failedFiles = [];\n\n const filePromises = nonDirectoryFiles.map(async file => {\n try {\n const urlEncodedPath = encodeURIComponent(file.path);\n console.log(\"url encoded path\", urlEncodedPath);\n const response = await vt.projects.files.content(projectId, urlEncodedPath);\n\n if (!response) {\n throw new Error(`Could not get content for file: ${file.path}`);\n }\n\n return {\n name: file.path,\n content: response,\n };\n } catch (error) {\n failedFiles.push({\n path: file.path,\n error: error.message,\n });\n }\n });\n\n const results = await Promise.all(filePromises);\n if (failedFiles.length > 0) {\n const failedFilesList = failedFiles.map(f => `'${f.path}': ${f.error}`).join(\", \");\n throw new Error(`Failed to fetch content for files: ${failedFilesList}`);\n }\n\n return results;\n}\n\nasync function createZipFromEndpoints(\n files: any[],\n zipFileName: string,\n): Promise {\n try {\n const zip = new JSZip();\n\n for (const file of files) {\n zip.file(file.name, file.content);\n }\n\n const zipBlob = await zip.generateAsync({\n type: \"blob\",\n compression: \"DEFLATE\",\n compressionOptions: { level: 6 },\n });\n\n return zipBlob;\n } catch (error) {\n console.error(\"Error creating ZIP file:\", error);\n throw error;\n }\n}\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[276,266],"backend","62b13a38-f489-11ef-8764-569c3dd06744","109559b3-d8ea-46de-b5c4-2b313bcbff13",29,["D",1740605637518],"# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) as the API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. \n\nWe *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.\n\n## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",[],[276,208],"e2e6f998-f486-11ef-b1d7-569c3dd06744",["D",1740604564126],[194,195],[276],["D",1740582463346],{"_11":12,"_98":94},{"_11":12,"_92":-5,"_93":94,"_31":49,"_95":96,"_97":30},{"_79":80,"_13":16,"_38":81,"_82":39,"_83":84,"_85":86,"_87":45,"_88":39,"_89":58,"_90":14,"_91":12},"ctx",{"_72":-5,"_119":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",{"_296":297,"_298":299,"_300":301,"_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","main","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 · frontend