React Hono Val Town Starter

\n \n \n \n",[],[82,123],"d974ba8e-3cf3-11f0-a6c7-9e149126039e","favicon.svg","bf2b6336-be24-4d8a-8586-821ecaf7bb6b",["D",1748567847096],"\n",[],[82,131],"d974b85e-3cf3-11f0-a6c7-9e149126039e","components","85d478b2-25ca-4be9-b422-c5e640a44c38",["D",1748567847096],[143],[82,138],{"_35":144,"_13":145,"_64":146,"_66":139,"_67":68,"_69":147,"_71":72,"_37":148,"_17":149,"_75":118,"_76":150,"_78":50,"_79":-5,"_96":151,"_18":152},"3a29b04a-3d9f-11f0-bac6-76b3cceeab13","App.tsx","a257d2b7-2c8a-434c-98df-e31aa0f5e095",41,["D",1748641453331],37,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Box,\n Button,\n Card,\n Flex,\n Heading,\n Select,\n Text,\n TextField,\n Theme,\n} from \"https://esm.sh/@radix-ui/themes@3.2.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n const [myIp, setMyIp] = useState(\"\");\n\n // HTTP request form state\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [url, setUrl] = useState(\"\");\n const [httpMethod, setHttpMethod] = useState(\"GET\");\n\n const [responseStatus, setResponseStatus] = useState(0);\n const [responseText, setResponseText] = useState(\"\");\n\n // Check if all three fields are non-blank\n const isFormComplete = username.trim() !== \"\" && password.trim() !== \"\" && url.trim() !== \"\";\n\n useEffect(() => {\n const getMyIp = async () => {\n const response = await fetch(\"https://api.ipify.org?format=json\");\n const data = await response.json();\n setMyIp(data.ip);\n };\n void getMyIp();\n }, []);\n\n const doSend = async () => {\n const response = await fetch(url, {\n method: httpMethod,\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Basic ${btoa(`${username}:${password}`)}`,\n },\n body: httpMethod === \"GET\" ? null : JSON.stringify({}),\n });\n let data = await response.text();\n try {\n data = JSON.stringify(JSON.parse(data), null, 2);\n } catch (e) {\n // ignore\n }\n setResponseStatus(response.status);\n setResponseText(data);\n console.log(data);\n };\n\n return (\n \n \n \n \n Val Town React + Hono Starter\n \n I've been clicked\n \n times\n \n {myIp && (\n \n My IP: {myIp}\n \n )}\n \n \n \n \n \n \n HTTP Request Configuration\n\n \n \n Username\n setUsername(e.target.value)}\n />\n \n\n \n Password\n setPassword(e.target.value)}\n />\n \n \n URL\n setUrl(e.target.value)}\n />\n \n \n HTTP Method\n \n \n \n GET\n POST\n PUT\n DELETE\n PATCH\n \n \n \n \n \n \n Send\n \n \n \n \n \n {responseStatus !== 0 && (\n \n \n \n Response status {responseStatus}\n

{responseText}

\n \n \n \n )}\n \n );\n}",[],[82,138,145],["D",1748567847096],[156],[88],{"_35":157,"_13":158,"_64":159,"_66":89,"_67":68,"_69":70,"_71":72,"_37":160,"_17":74,"_75":161,"_76":162,"_78":50,"_79":-5,"_96":163,"_18":164},"d974acec-3cf3-11f0-a6c7-9e149126039e","index.ts","45d1f77b-6c01-45ed-a757-1b59741ef94c",["D",1748567847096],"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\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;",[],[88,158],"d970baa6-3cf3-11f0-a6c7-9e149126039e",["D",1748567847096],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","b8fb5680-3cd7-11f0-b548-07b16fb573f7","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","49d0c3f2-8440-4c81-8e4a-46fa415da80d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_208":204},"org",{"_11":12,"_202":-5,"_203":204,"_171":172,"_205":206,"_207":50},"branch",{"_17":147,"_13":16,"_35":68,"_41":165,"_44":36,"_45":198,"_199":52,"_200":42,"_201":56,"_57":14,"_53":12},67,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeG11bmpwSXlueVFMVWlkaW1DdU5VeTlmSVUifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":165,"_13":14,"_37":280,"_48":-5,"_167":50,"_51":52,"_168":52,"_169":-5,"_170":-5,"_171":172,"_173":159,"_174":72,"_175":-5,"_176":-5,"_177":70,"_55":178,"_179":-5,"_180":-5,"_181":-5,"_182":-5,"_183":184,"_185":184,"_186":187,"_188":187,"_189":187,"_190":184,"_191":184,"_192":281,"_194":282,"_196":283,"_49":50},[250,252,259],"files",[250,251,252,253,254,255,256,257,258,259],"counts",{"_241":74,"_242":70,"_243":70,"_34":244,"_245":246},[235,236,237],"upstreamProject",{"_35":42,"_13":58,"_169":231,"_170":232,"_51":52,"_192":233},"upstreamBranch",{"_35":36,"_37":229,"_39":230,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789581599&sig=be8c9241dcaf80ae72eff5d4763f3300ec6426a8bddc365a5efaae5f85e4dee1",{"_11":54,"_208":234},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789581599&sig=bed85510764f48a9de82762af4b4ce99c525d0ab75e5b57f327c71a53e183d4a",{"_35":87,"_13":88,"_64":89,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":90,"_17":74,"_75":85,"_76":-5,"_78":50,"_79":-5,"_18":240},{"_35":81,"_13":82,"_64":83,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":84,"_17":74,"_75":85,"_76":-5,"_78":50,"_79":-5,"_18":239},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":73,"_17":74,"_75":24,"_76":77,"_78":50,"_79":-5,"_18":238},[63],[82],[88],"pulls","branches","forks",{"_247":74,"_249":74},"connections",{"_247":74,"_248":74},"count","unfilledCount","emptyCount",{"_35":87,"_13":88,"_64":89,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":153,"_17":74,"_75":85,"_76":-5,"_78":50,"_79":-5,"_96":278,"_18":279},{"_35":157,"_13":158,"_64":159,"_66":89,"_67":68,"_69":70,"_71":72,"_37":160,"_17":74,"_75":161,"_76":162,"_78":50,"_79":-5,"_96":276,"_18":277},{"_35":81,"_13":82,"_64":83,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":99,"_17":74,"_75":85,"_76":-5,"_78":50,"_79":-5,"_96":274,"_18":275},{"_35":137,"_13":138,"_64":139,"_66":83,"_67":68,"_69":70,"_71":72,"_37":140,"_17":74,"_75":85,"_76":-5,"_78":50,"_79":-5,"_96":272,"_18":273},{"_35":144,"_13":145,"_64":146,"_66":139,"_67":68,"_69":147,"_71":72,"_37":148,"_17":149,"_75":118,"_76":150,"_78":50,"_79":-5,"_96":270,"_18":271},{"_35":130,"_13":131,"_64":132,"_66":83,"_67":68,"_69":70,"_71":72,"_37":133,"_17":74,"_75":24,"_76":134,"_78":50,"_79":-5,"_96":268,"_18":269},{"_35":122,"_13":123,"_64":124,"_66":83,"_67":68,"_69":125,"_71":72,"_37":126,"_17":70,"_75":24,"_76":127,"_78":50,"_79":-5,"_96":266,"_18":267},{"_35":114,"_13":115,"_64":116,"_66":83,"_67":68,"_69":70,"_71":72,"_37":117,"_17":74,"_75":118,"_76":119,"_78":50,"_79":-5,"_96":264,"_18":265},{"_35":107,"_13":108,"_64":109,"_66":83,"_67":68,"_69":70,"_71":72,"_37":110,"_17":74,"_75":24,"_76":111,"_78":50,"_79":-5,"_96":262,"_18":263},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":95,"_17":74,"_75":24,"_76":77,"_78":50,"_79":-5,"_96":260,"_18":261},[],[63],[],[82,108],[],[82,115],[],[82,123],[],[82,131],[],[82,138,145],[254],[82,138],[253,255,256,257,258],[82],[],[88,158],[251],[88],["D",1748567847096],{"_11":12,"_208":204},{"_11":12,"_202":-5,"_203":204,"_171":172,"_205":206,"_207":50},{"_17":147,"_13":16,"_35":68,"_41":165,"_44":36,"_45":198,"_199":52,"_200":42,"_201":56,"_57":14,"_53":12},"ctx",{"_192":-5,"_226":317,"_318":319,"_320":321,"_322":50,"_323":50,"_324":50,"_325":72,"_326":-5,"_327":-7,"_328":-7,"_329":74,"_330":50,"_331":50,"_332":-5,"_333":50,"_334":50,"_335":50,"_336":-5},"ENV",{"_288":289,"_290":291,"_292":16,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316},"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"]

Code