[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_396":397,"_398":399},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":86,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":121,"_122":123,"_124":49,"_125":126,"_127":25,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":49},"version",73,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",true,"deletedHere","path","frontend/components/AuthForm.tsx","latestPath","fileId","85b7d374-4890-11f0-a876-76b3cceeab13","name","AuthForm.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { signIn, signUp, signInWithGoogle } from \"../lib/auth-client.ts\";\n\nexport function AuthForm({ onSuccess }: { onSuccess: () => void }) {\n const [isLogin, setIsLogin] = React.useState(true);\n const [email, setEmail] = React.useState(\"\");\n const [password, setPassword] = React.useState(\"\");\n const [error, setError] = React.useState(\"\");\n const [loading, setLoading] = React.useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n setLoading(true);\n\n try {\n if (isLogin) {\n await signIn.email({\n email,\n password,\n });\n } else {\n await signUp.email({\n email,\n password,\n name: email.split(\"@\")[0], // Use email prefix as name\n });\n }\n onSuccess();\n } catch (err) {\n setError(err.message || \"Authentication failed\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n {isLogin ? \"Sign In\" : \"Sign Up\"}\n

\n \n

\n Email\n setEmail(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n />\n

\n \n

\n Password\n setPassword(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n minLength={6}\n />\n

\n \n {error && (\n

{error}

\n )}\n \n \n {loading ? \"Loading...\" : isLogin ? \"Sign In\" : \"Sign Up\"}\n \n \n \n

\n Or continue with\n

\n \n signInWithGoogle()}\n className=\"mt-3 w-full flex items-center justify-center gap-3 py-2 px-4 border border-gray-300 rounded hover:bg-gray-50 transition-colors\"\n >\n \n Sign in with Google\n \n

\n \n

\n {isLogin ? \"Don't have an account? \" : \"Already have an account? \"}\n setIsLogin(!isLogin)}\n className=\"text-blue-500 hover:underline\"\n >\n {isLogin ? \"Sign Up\" : \"Sign In\"}\n \n

\n );\n}","createdAt",["D",1749846875598],"branchVersion","branchId","00bc9cf2-488d-11f0-8815-76b3cceeab13","id","00b957d6-488d-11f0-8815-76b3cceeab13","tanstackReactHonoExample",["D",1749843088792],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","70598581-74a1-4b7d-8194-a74d34e1c959","pinnedFileId","1816bbd4-d21b-4fb3-bb05-a040b85bf1ee","pinPreview","pinMigrated","screenshotVersion","likeCount",8,"orgId","ee726368-7b53-4ccf-9454-dc28b139ac2d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":49},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":91,"_92":51,"_93":94,"_95":96,"_97":45,"_98":99},"isOwned",96,"main","projectId","forkedBranchId","41ef5540-f2f5-11ef-891c-569c3dd06744","forkedBranchVersion",228,"forkedProjectPrivacy","forkedProjectId","41ef0130-f2f5-11ef-891c-569c3dd06744","forkedProjectOrgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","userHandle","laurynas","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzeDdZM2RjbFBvQ1NTM2tWdXRNbjBEaER0dCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":392,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":393,"_80":394,"_82":395,"_84":49},"tree",[200,209,220,223,224,225],"files",[200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225],"counts",{"_190":156,"_191":163,"_192":62,"_193":194,"_195":196},"contents",[143,144,145,146,147,148],"upstreamProject",{"_43":94,"_32":139,"_53":140,"_54":-5,"_50":51,"_78":141},"upstreamBranch",{"_43":89,"_38":132,"_133":134,"_32":86,"_87":94,"_13":135,"_88":-5,"_90":-5,"_136":137,"_47":-5,"_84":49,"_50":51,"_98":138,"_63":96,"_97":139},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740432065884],"updatedAt",["D",1755285423526],244,"lockfileKey","1755661346047-esm.town_v_stevekrouse_reactHonoExample@244-main","stevekrouse","reactHonoExample","Example with client-side React & Hono server",{"_100":138,"_107":142},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_43":185,"_32":186,"_30":187,"_152":-5,"_41":42,"_40":163,"_154":25,"_38":188,"_13":156,"_34":178,"_36":-5,"_24":49,"_158":-5,"_27":189},{"_43":180,"_32":181,"_30":182,"_152":-5,"_41":42,"_40":163,"_154":25,"_38":183,"_13":156,"_34":178,"_36":-5,"_24":49,"_158":-5,"_27":184},{"_43":174,"_32":175,"_30":176,"_152":-5,"_41":42,"_40":163,"_154":25,"_38":177,"_13":156,"_34":178,"_36":-5,"_24":49,"_158":-5,"_27":179},{"_43":167,"_32":168,"_30":169,"_152":-5,"_41":42,"_40":170,"_154":25,"_38":171,"_13":156,"_34":20,"_36":172,"_24":49,"_158":-5,"_27":173},{"_43":160,"_32":161,"_30":162,"_152":-5,"_41":42,"_40":163,"_154":49,"_38":164,"_13":156,"_34":20,"_36":165,"_24":49,"_158":-5,"_27":166},{"_43":149,"_32":150,"_30":151,"_152":-5,"_41":42,"_40":153,"_154":25,"_38":155,"_13":156,"_34":20,"_36":157,"_24":49,"_158":-5,"_27":159},"5af79988-488d-11f0-8b31-76b3cceeab13","deno.json","5af79a28-488d-11f0-8b31-76b3cceeab13","parentId",3,"latest",["D",1749843240140],0,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","label",[150],"00bf698c-488d-11f0-8815-76b3cceeab13","README.md","907a0a47-fa94-45c6-91bf-50a92ed1739f",1,["D",1749843088792],"# React Hono Val Town Project Starter Template\n\nThis is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.\n\nThis app is broken up into three folders, corresponding to where the code in those folders run:\n\n- `backend/` - runs on Val Town serverless infrastructure in Deno\n- `frontend/` - runs in the user's browser\n- `shared/` - runs in both the frontend and backend\n\nThe entrypoint of this app is `backend/index.ts`, which is the Hono HTTP server, which serves the HTML, CSS, and JS, which run client-side.\n\nYou can click into each of those folders to view their respective READMEs.",[161],"5aebb79e-488d-11f0-ab14-76b3cceeab13",".vtignore","5aebb8a2-488d-11f0-ab14-76b3cceeab13",2,["D",1749843240140],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[168],"00bf67ca-488d-11f0-8815-76b3cceeab13","shared","34c1963a-864e-4e0a-8c91-ebc25957268c",["D",1749843088792],"directory",[175],"00bf6338-488d-11f0-8815-76b3cceeab13","frontend","993bf076-45c8-4ff1-b9d2-23abc32dff5c",["D",1749843088792],[181],"00bf4fd8-488d-11f0-8815-76b3cceeab13","backend","b017928b-3c52-4e45-9830-cf0f8778888e",["D",1749843088792],[186],"pulls","branches","forks","envVars",{"_197":156,"_199":156},"connections",{"_197":156,"_198":156},"count","unfilledCount","emptyCount",{"_43":185,"_32":186,"_30":187,"_152":-5,"_41":42,"_40":163,"_154":25,"_38":389,"_13":156,"_34":178,"_36":-5,"_24":49,"_158":-5,"_227":390,"_27":391},{"_43":385,"_32":355,"_30":350,"_152":187,"_41":42,"_40":163,"_154":25,"_38":386,"_13":156,"_34":178,"_36":-5,"_24":49,"_158":-5,"_227":387,"_27":388},{"_43":379,"_32":161,"_30":380,"_152":350,"_41":42,"_40":163,"_154":25,"_38":381,"_13":156,"_34":20,"_36":382,"_24":49,"_158":-5,"_227":383,"_27":384},{"_43":371,"_32":372,"_30":373,"_152":350,"_41":42,"_40":374,"_154":25,"_38":375,"_13":163,"_34":35,"_36":376,"_24":49,"_158":-5,"_227":377,"_27":378},{"_43":363,"_32":364,"_30":365,"_152":350,"_41":42,"_40":366,"_154":49,"_38":367,"_13":170,"_34":35,"_36":368,"_24":49,"_158":-5,"_227":369,"_27":370},{"_43":356,"_32":291,"_30":357,"_152":350,"_41":42,"_40":358,"_154":49,"_38":359,"_13":163,"_34":35,"_36":360,"_24":49,"_158":-5,"_227":361,"_27":362},{"_43":347,"_32":348,"_30":349,"_152":350,"_41":42,"_40":257,"_154":49,"_38":351,"_13":156,"_34":35,"_36":352,"_24":49,"_158":-5,"_227":353,"_27":354},{"_43":341,"_32":161,"_30":342,"_152":187,"_41":42,"_40":163,"_154":25,"_38":343,"_13":156,"_34":20,"_36":344,"_24":49,"_158":-5,"_227":345,"_27":346},{"_43":333,"_32":334,"_30":57,"_152":187,"_41":42,"_40":335,"_154":49,"_38":336,"_13":170,"_34":337,"_36":338,"_24":49,"_158":-5,"_227":339,"_27":340},{"_43":180,"_32":181,"_30":182,"_152":-5,"_41":42,"_40":163,"_154":25,"_38":330,"_13":156,"_34":178,"_36":-5,"_24":49,"_158":-5,"_227":331,"_27":332},{"_43":326,"_32":316,"_30":309,"_152":182,"_41":42,"_40":163,"_154":25,"_38":327,"_13":156,"_34":178,"_36":-5,"_24":49,"_158":-5,"_227":328,"_27":329},{"_43":317,"_32":318,"_30":319,"_152":309,"_41":42,"_40":320,"_154":49,"_38":321,"_13":322,"_34":35,"_36":323,"_24":49,"_158":-5,"_227":324,"_27":325},{"_43":306,"_32":307,"_30":308,"_152":309,"_41":42,"_40":310,"_154":25,"_38":311,"_13":312,"_34":35,"_36":313,"_24":49,"_158":-5,"_227":314,"_27":315},{"_43":301,"_32":300,"_30":293,"_152":182,"_41":42,"_40":302,"_154":25,"_38":303,"_13":156,"_34":178,"_36":-5,"_24":49,"_158":-5,"_227":304,"_27":305},{"_43":290,"_32":291,"_30":292,"_152":293,"_41":42,"_40":294,"_154":49,"_38":295,"_13":296,"_34":35,"_36":297,"_24":49,"_158":-5,"_227":298,"_27":299},{"_43":284,"_32":161,"_30":285,"_152":182,"_41":42,"_40":163,"_154":25,"_38":286,"_13":156,"_34":20,"_36":287,"_24":49,"_158":-5,"_227":288,"_27":289},{"_43":277,"_32":278,"_30":279,"_152":182,"_41":42,"_40":163,"_154":25,"_38":280,"_13":156,"_34":20,"_36":281,"_24":49,"_158":-5,"_227":282,"_27":283},{"_43":270,"_32":271,"_30":272,"_152":182,"_41":42,"_40":62,"_154":25,"_38":273,"_13":153,"_34":20,"_36":274,"_24":49,"_158":-5,"_227":275,"_27":276},{"_43":261,"_32":262,"_30":263,"_152":182,"_41":42,"_40":264,"_154":49,"_38":265,"_13":266,"_34":35,"_36":267,"_24":49,"_158":-5,"_227":268,"_27":269},{"_43":252,"_32":253,"_30":254,"_152":182,"_41":42,"_40":255,"_154":49,"_38":256,"_13":257,"_34":35,"_36":258,"_24":49,"_158":-5,"_227":259,"_27":260},{"_43":174,"_32":175,"_30":176,"_152":-5,"_41":42,"_40":163,"_154":25,"_38":249,"_13":156,"_34":178,"_36":-5,"_24":49,"_158":-5,"_227":250,"_27":251},{"_43":243,"_32":161,"_30":244,"_152":176,"_41":42,"_40":163,"_154":25,"_38":245,"_13":156,"_34":20,"_36":246,"_24":49,"_158":-5,"_227":247,"_27":248},{"_43":236,"_32":237,"_30":238,"_152":176,"_41":42,"_40":163,"_154":25,"_38":239,"_13":156,"_34":35,"_36":240,"_24":49,"_158":-5,"_227":241,"_27":242},{"_43":167,"_32":168,"_30":169,"_152":-5,"_41":42,"_40":170,"_154":25,"_38":233,"_13":156,"_34":20,"_36":172,"_24":49,"_158":-5,"_227":234,"_27":235},{"_43":160,"_32":161,"_30":162,"_152":-5,"_41":42,"_40":163,"_154":49,"_38":230,"_13":156,"_34":20,"_36":165,"_24":49,"_158":-5,"_227":231,"_27":232},{"_43":149,"_32":150,"_30":151,"_152":-5,"_41":42,"_40":153,"_154":25,"_38":226,"_13":156,"_34":20,"_36":157,"_24":49,"_158":-5,"_227":228,"_27":229},["D",1749843240140],"children",[],[150],["D",1749843088792],[],[161],["D",1749843240140],[],[168],"00bf6676-488d-11f0-8815-76b3cceeab13","utils.ts","c5806529-a593-4f6f-9f09-ace8e5da887f",["D",1749843088792],"export interface Message {\n content: string;\n}\n\nexport const MESSAGE_LIMIT = 5;",[],[175,237],"00bf64fa-488d-11f0-8815-76b3cceeab13","75b5b13f-9093-45d4-a868-e766db29c30b",["D",1749843088792],"# Shared\n\nIt's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:\n\n![shapes at 25-02-25 11.57.13.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/75db1d51-d9b3-45e0-d178-25d886c10700/public)\n\nFor example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support \"web-standards\", but there are definitely edge cases to look out for.",[],[175,161],["D",1749843088792],[221,222],[175],"56ce4296-4895-11f0-b9cf-76b3cceeab13","router.tsx","ed120fa0-4893-11f0-ba02-76b3cceeab13",69,["D",1749846669205],14,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport {\n RootRoute,\n Route,\n Outlet,\n Link,\n createRouter,\n RouterProvider,\n redirect,\n} from \"https://esm.sh/@tanstack/react-router@^1.121.0?deps=react@19\";\nimport {\n QueryClient,\n QueryClientProvider,\n} from \"https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19\";\nimport { App } from \"./components/App.tsx\";\nimport { AuthForm } from \"./components/AuthForm.tsx\";\nimport { useSession } from \"./lib/auth-client.ts\";\n\n// Create a query client\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n staleTime: 60 * 1000, // 1 minute\n refetchOnWindowFocus: false,\n },\n },\n});\n\n// Authentication context type\ninterface AuthContext {\n user: any | null;\n isLoading: boolean;\n}\n\n// Root route with layout and context\nconst rootRoute = new RootRoute({\n component: () => {\n return (\n

\n \n

\n );\n },\n context: (): AuthContext => {\n // This will be provided when creating the router\n throw new Error(\"Auth context not provided\");\n },\n});\n\n// Home route - the message board (protected)\nconst homeRoute = new Route({\n getParentRoute: () => rootRoute,\n path: \"/\",\n beforeLoad: async ({ context, location }) => {\n if (!context.user && !context.isLoading) {\n throw redirect({\n to: \"/auth\",\n search: {\n redirect: location.href,\n },\n });\n }\n },\n component: () => {\n const { data: session, isPending } = useSession();\n\n if (isPending) {\n return (\n

\n );\n }\n\n // Get initial data from window if available\n const initialData = window.__INITIAL_DATA__ || {};\n \n return ;\n },\n});\n\n// Auth route (redirect if already authenticated)\nconst authRoute = new Route({\n getParentRoute: () => rootRoute,\n path: \"/auth\",\n beforeLoad: async ({ context, search }) => {\n if (context.user && !context.isLoading) {\n throw redirect({\n to: (search as any)?.redirect || \"/\",\n });\n }\n },\n component: () => {\n return (\n {\n // Router will handle redirect after successful auth\n window.location.href = \"/\";\n }} \n />\n );\n },\n});\n\n// Create the route tree\nconst routeTree = rootRoute.addChildren([homeRoute, authRoute]);\n\n// Create the router\nexport const router = createRouter({ \n routeTree,\n defaultPreload: \"intent\",\n context: {\n user: null,\n isLoading: true,\n },\n});\n\n// Register the router for TypeScript\ndeclare module \"@tanstack/react-router\" {\n interface Register {\n router: typeof router;\n }\n}\n\n// Simple auth context wrapper\nfunction AuthContextWrapper({ children }: { children: React.ReactNode }) {\n const { data: session, isPending } = useSession();\n \n const contextValue: AuthContext = {\n user: session?.user || null,\n isLoading: isPending,\n };\n\n return (\n \n );\n}\n\n// Export the RouterProvider component with QueryClient\nexport function RouterApp() {\n return (\n \n \n \n );\n}",[],[181,253],"ebd9b826-4894-11f0-b0c1-76b3cceeab13","index.tsx","9776f79c-2e7c-4640-af2e-85d18ddd7af9",60,["D",1749846489765],5,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { createRoot } from \"https://esm.sh/react-dom@19/client?deps=react@19\";\nimport { type Message } from \"../shared/utils.ts\";\nimport { RouterApp } from \"./router.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ndeclare global {\n interface Window {\n __INITIAL_DATA__: {\n initialMessages?: Message[];\n thisProjectURL?: string;\n user?: any;\n };\n }\n}\n\ncreateRoot(root).render();",[],[181,262],"bd34648c-488d-11f0-b6cb-76b3cceeab13","index.html","fafbb8e7-6b0d-44de-8ee4-80172c0dbd39",["D",1749843405031],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[181,271],"00bf5b9a-488d-11f0-8815-76b3cceeab13","favicon.svg","269d4697-07e9-4d11-bb4f-828090903775",["D",1749843088792],"",[],[181,278],"00bf5992-488d-11f0-8815-76b3cceeab13","0d80abf5-81dc-4f00-8cdb-801bb4f30d9c",["D",1749843088792],"# Frontend\n\nThis template is a classic client-side-only React app. \n\n## `index.html`\n\nThe **entrypoint** for the frontend is `/frontend/index.html`. This is the HTML page that is returned at the root from `/backend/index.ts`.\n\nThis HTML file imports `/frontend/style.css` from `/public/style.css` and `/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/` is mapped to `/public` by `/backend/index.ts`. This is just a convention. You could import & serve everything out of the same folder name.\n\nThis HTML file has a `

`, which is where we mount the React app.\n\nThis HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is the **entrypoint** for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a `.tsx` extension becaues browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)\n\n## `index.tsx`\n\nThis file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `

`.\n\nIt also looks for *bootstrapped* JSON data at `window.__INITIAL_DATA`, and passes that only to the ``.\n\n## `favicon.svg`\n\nAs of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).\n\n## `components/`\n\nThis directory is where the React components are stored. They're pretty standard client-side React components.",[],[181,161],"59e892a6-4895-11f0-9338-76b3cceeab13","queries.ts","34872dc0-4894-11f0-bbed-76b3cceeab13","74f9bc1e-4890-11f0-a41d-76b3cceeab13",70,["D",1749846674411],4,"import { useQuery, useMutation, useQueryClient } from \"https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19\";\nimport { type Message } from \"../../shared/utils.ts\";\n\n// Fetch messages query\nexport function useMessages(initialData?: Message[]) {\n return useQuery({\n queryKey: [\"messages\"],\n queryFn: async () => {\n const response = await fetch(\"/messages\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch messages\");\n }\n const data = await response.json();\n return data.reverse() as Message[];\n },\n initialData,\n staleTime: 30 * 1000, // 30 seconds\n });\n}\n\n// Post message mutation\nexport function usePostMessage() {\n const queryClient = useQueryClient();\n \n return useMutation({\n mutationFn: async (content: string) => {\n const response = await fetch(\"/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ content }),\n });\n \n if (!response.ok) {\n if (response.status === 401) {\n // Session expired, redirect to auth\n window.location.href = \"/auth\";\n throw new Error(\"Authentication required\");\n }\n throw new Error(\"Failed to post message\");\n }\n \n return response.json();\n },\n onSuccess: () => {\n // Invalidate and refetch messages\n queryClient.invalidateQueries({ queryKey: [\"messages\"] });\n },\n });\n}\n\n// Session query\nexport function useSessionQuery() {\n return useQuery({\n queryKey: [\"session\"],\n queryFn: async () => {\n const response = await fetch(\"/api/user\", {\n credentials: \"include\",\n });\n if (!response.ok) {\n throw new Error(\"Failed to fetch session\");\n }\n return response.json();\n },\n staleTime: 5 * 60 * 1000, // 5 minutes\n retry: false,\n });\n}",[],[181,300,291],"lib","74f9bb74-4890-11f0-a41d-76b3cceeab13",22,["D",1749844572344],[214],[181,300],"04a074ee-4895-11f0-bf11-76b3cceeab13","MessageInput.tsx","f4204128-80e3-4618-88b0-b489ab57afe9","a08e3964-ce0f-4dd2-8e67-875aecd9695a",66,["D",1749846531331],6,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { usePostMessage } from \"../lib/queries.ts\";\n\nexport function MessageInput() {\n const [message, setMessage] = React.useState(\"\");\n const postMessage = usePostMessage();\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!message.trim()) return;\n\n try {\n await postMessage.mutateAsync(message);\n setMessage(\"\");\n } catch (error) {\n console.error(\"Message submission failed\", error);\n }\n };\n\n return (\n

\n setMessage(e.target.value)}\n placeholder=\"Type a message...\"\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n \n \n );\n}",[],[181,316,307],"components","01664f74-4895-11f0-a289-76b3cceeab13","App.tsx","a1a5af69-de9f-4e56-8c53-d162ce957720",65,["D",1749846525917],7,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\nimport { signOut, useSession } from \"../lib/auth-client.ts\";\nimport { useMessages } from \"../lib/queries.ts\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const { data: session } = useSession();\n const { data: messages = [], isLoading, error } = useMessages(initialMessages);\n\n if (isLoading && !initialMessages.length) {\n return (\n

Loading messages...

\n );\n }\n\n if (error) {\n return (\n

Failed to load messages

\n );\n }\n\n return (\n

💬 Message Board!

\n \n {session?.user?.email}\n \n signOut()}\n className=\"text-sm px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition-colors\"\n >\n Sign Out\n \n

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

\n );\n}\n\nfunction MessageList({ messages }: { messages: Message[] }) {\n const displayedMessages = messages.slice(0, MESSAGE_LIMIT);\n return (\n

\n {displayedMessages.map((msg) => )}\n

\n );\n}\n\nfunction MessageItem({ message }) {\n const formattedDate = new Date(message.timestamp).toLocaleString();\n\n return (\n

{message.content}

\n {formattedDate}\n

\n );\n}",[],[181,316,318],"00bf569a-488d-11f0-8815-76b3cceeab13",["D",1749843088792],[211,212],[181,316],["D",1749843088792],[210,213,215,216,217,218,219],[181],"683e6b28-4890-11f0-8617-76b3cceeab13","index.ts",21,["D",1749844550979],"http","import { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { cors } from \"npm:hono/cors\";\nimport { getMessages, insertMessage } from \"./database/queries.ts\";\nimport { auth, type Session } from \"./auth.ts\";\n\nconst app = new Hono<{\n Variables: {\n user: Session[\"user\"] | null;\n session: Session[\"session\"] | null;\n };\n}>();\n\n// Configure CORS for auth endpoints\napp.use(\n \"/api/auth/*\",\n cors({\n origin: [\"http://localhost:3000\", \"https://laurynas-fp-react-hono-example.val.run\"],\n allowHeaders: [\"Content-Type\", \"Authorization\"],\n allowMethods: [\"POST\", \"GET\", \"OPTIONS\"],\n exposeHeaders: [\"Content-Length\"],\n maxAge: 600,\n credentials: true,\n })\n);\n\n// Auth routes\napp.on([\"POST\", \"GET\"], \"/api/auth/*\", (c) => {\n return auth.handler(c.req.raw);\n});\n\n// Session middleware\napp.use(\"*\", async (c, next) => {\n const session = await auth.api.getSession({ headers: c.req.raw.headers });\n\n if (!session) {\n c.set(\"user\", null);\n c.set(\"session\", null);\n return next();\n }\n\n c.set(\"user\", session.user);\n c.set(\"session\", session.session);\n return next();\n});\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 // Bootstrap the initial messages data into index.html\n // To avoid an extra request and loading flash\n const initialMessages = await getMessages();\n\n // Get the current user session\n const user = c.get(\"user\");\n \n // Get this project's URL, in a way that works across forks and branches\n const projectVal = parseProject(import.meta.url);\n const thisProjectURL = projectVal.links.self.project;\n\n // Inject the data as a global variable inside a script tag\n const dataScript = ``;\n\n // Insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\n// Serve all /frontend files under /public\napp.get(\"/public/**/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Provide an endpoint for the frontend to get messages as JSON\napp.get(\"/messages\", async (c) => {\n const messages = await getMessages();\n return c.json(messages);\n});\n\n// Get current user endpoint\napp.get(\"/api/user\", (c) => {\n const user = c.get(\"user\");\n return c.json({ user });\n});\n\n// Provide an endpoint for the frontend to insert a new message\napp.post(\"/messages\", async (c) => {\n const user = c.get(\"user\");\n \n if (!user) {\n return c.json({ error: \"Authentication required\" }, 401);\n }\n\n const { content } = await c.req.json();\n\n if (!content || content.trim() === \"\") {\n return c.json({ error: \"Message cannot be empty\" }, 400);\n }\n\n await insertMessage(content, user.id);\n\n return c.json({ success: true }, 201);\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;",[],[186,334],"00bf45c4-488d-11f0-8815-76b3cceeab13","db5198d4-b2af-45e5-96a3-e91c134fcb0b",["D",1749843088792],"# 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* `database/` - this contains the code for interfacing with the app's SQLite database table\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.",[],[186,161],"edce649c-488f-11f0-a955-76b3cceeab13","schema.ts","edce6564-488f-11f0-a955-76b3cceeab13","47872084-bd26-4a33-8825-f0dad8ff0497",["D",1749844345536],"import { sqliteTable, text, integer, primaryKey } from \"npm:drizzle-orm/sqlite-core\";\nimport { createId } from \"npm:@paralleldrive/cuid2\";\n\n// Messages table\nexport const messages = sqliteTable(\"messages\", {\n id: integer(\"id\").primaryKey({ autoIncrement: true }),\n content: text(\"content\").notNull(),\n timestamp: text(\"timestamp\").notNull().default(new Date().toISOString()),\n userId: text(\"userId\").references(() => user.id),\n});\n\n// BetterAuth tables\nexport const user = sqliteTable(\"user\", {\n id: text(\"id\").primaryKey().$defaultFn(() => createId()),\n email: text(\"email\").notNull().unique(),\n emailVerified: integer(\"emailVerified\", { mode: \"boolean\" }).default(false),\n name: text(\"name\"),\n image: text(\"image\"),\n createdAt: text(\"createdAt\").notNull().default(new Date().toISOString()),\n updatedAt: text(\"updatedAt\").notNull().default(new Date().toISOString()),\n});\n\nexport const session = sqliteTable(\"session\", {\n id: text(\"id\").primaryKey().$defaultFn(() => createId()),\n expiresAt: text(\"expiresAt\").notNull(),\n token: text(\"token\").notNull().unique(),\n createdAt: text(\"createdAt\").notNull().default(new Date().toISOString()),\n updatedAt: text(\"updatedAt\").notNull().default(new Date().toISOString()),\n ipAddress: text(\"ipAddress\"),\n userAgent: text(\"userAgent\"),\n userId: text(\"userId\").notNull().references(() => user.id, { onDelete: \"cascade\" }),\n});\n\nexport const account = sqliteTable(\"account\", {\n id: text(\"id\").primaryKey().$defaultFn(() => createId()),\n accountId: text(\"accountId\").notNull(),\n providerId: text(\"providerId\").notNull(),\n userId: text(\"userId\").notNull().references(() => user.id, { onDelete: \"cascade\" }),\n accessToken: text(\"accessToken\"),\n refreshToken: text(\"refreshToken\"),\n idToken: text(\"idToken\"),\n accessTokenExpiresAt: text(\"accessTokenExpiresAt\"),\n refreshTokenExpiresAt: text(\"refreshTokenExpiresAt\"),\n scope: text(\"scope\"),\n password: text(\"password\"),\n createdAt: text(\"createdAt\").notNull().default(new Date().toISOString()),\n updatedAt: text(\"updatedAt\").notNull().default(new Date().toISOString()),\n});\n\nexport const verification = sqliteTable(\"verification\", {\n id: text(\"id\").primaryKey().$defaultFn(() => createId()),\n identifier: text(\"identifier\").notNull(),\n value: text(\"value\").notNull(),\n expiresAt: text(\"expiresAt\").notNull(),\n createdAt: text(\"createdAt\").notNull().default(new Date().toISOString()),\n updatedAt: text(\"updatedAt\").notNull().default(new Date().toISOString()),\n});\n\n// Type exports\nexport type User = typeof user.$inferSelect;\nexport type Session = typeof session.$inferSelect;\nexport type Message = typeof messages.$inferSelect;\nexport type Account = typeof account.$inferSelect;\nexport type Verification = typeof verification.$inferSelect;",[],[186,355,348],"database","36e27b8c-4890-11f0-b0ea-76b3cceeab13","71c8db95-d720-4b95-86dd-0685be7d8d5a",18,["D",1749844468168],"import { desc } from \"npm:drizzle-orm\";\nimport { db, schema } from \"./db.ts\";\nimport { createTables } from \"./migrations.ts\";\nimport { MESSAGE_LIMIT } from \"../../shared/utils.ts\";\n\n// This will create the database table if it doesn't exist.\n// This will run every time the app starts up. You can\n// comment out this line for a modest (30ms) performance improvement\n// on cold starts. It's left in to ensure the database tables are\n// automatically set up correctly for users who fork this app.\nawait createTables();\n\nexport async function getMessages(limit = MESSAGE_LIMIT, userId?: string) {\n const messages = await db\n .select()\n .from(schema.messages)\n .orderBy(desc(schema.messages.timestamp))\n .limit(limit)\n .all();\n \n return messages;\n}\n\nexport async function insertMessage(content: string, userId?: string) {\n await db\n .insert(schema.messages)\n .values({\n content,\n userId,\n timestamp: new Date().toISOString(),\n })\n .run();\n}",[],[186,355,291],"21edd0b4-4890-11f0-8079-76b3cceeab13","migrations.ts","cad95ec9-e6e8-46c6-9038-ed55f4a00f29",17,["D",1749844433008],"import { sql } from \"npm:drizzle-orm\";\nimport { db } from \"./db.ts\";\n\nexport async function createTables() {\n // Create messages table\n await db.run(sql`\n CREATE TABLE IF NOT EXISTS messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n content TEXT NOT NULL,\n timestamp TEXT NOT NULL DEFAULT (datetime('now')),\n userId TEXT,\n FOREIGN KEY (userId) REFERENCES user(id)\n )\n `);\n\n // Create user table\n await db.run(sql`\n CREATE TABLE IF NOT EXISTS user (\n id TEXT PRIMARY KEY,\n email TEXT NOT NULL UNIQUE,\n emailVerified INTEGER DEFAULT 0,\n name TEXT,\n image TEXT,\n createdAt TEXT NOT NULL DEFAULT (datetime('now')),\n updatedAt TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n\n // Create session table\n await db.run(sql`\n CREATE TABLE IF NOT EXISTS session (\n id TEXT PRIMARY KEY,\n expiresAt TEXT NOT NULL,\n token TEXT NOT NULL UNIQUE,\n createdAt TEXT NOT NULL DEFAULT (datetime('now')),\n updatedAt TEXT NOT NULL DEFAULT (datetime('now')),\n ipAddress TEXT,\n userAgent TEXT,\n userId TEXT NOT NULL,\n FOREIGN KEY (userId) REFERENCES user(id) ON DELETE CASCADE\n )\n `);\n\n // Create account table\n await db.run(sql`\n CREATE TABLE IF NOT EXISTS account (\n id TEXT PRIMARY KEY,\n accountId TEXT NOT NULL,\n providerId TEXT NOT NULL,\n userId TEXT NOT NULL,\n accessToken TEXT,\n refreshToken TEXT,\n idToken TEXT,\n accessTokenExpiresAt TEXT,\n refreshTokenExpiresAt TEXT,\n scope TEXT,\n password TEXT,\n createdAt TEXT NOT NULL DEFAULT (datetime('now')),\n updatedAt TEXT NOT NULL DEFAULT (datetime('now')),\n FOREIGN KEY (userId) REFERENCES user(id) ON DELETE CASCADE\n )\n `);\n\n // Create verification table\n await db.run(sql`\n CREATE TABLE IF NOT EXISTS verification (\n id TEXT PRIMARY KEY,\n identifier TEXT NOT NULL,\n value TEXT NOT NULL,\n expiresAt TEXT NOT NULL,\n createdAt TEXT NOT NULL DEFAULT (datetime('now')),\n updatedAt TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n}",[],[186,355,364],"14668a3a-4890-11f0-aefe-76b3cceeab13","db.ts","f552bd26-488f-11f0-92c5-76b3cceeab13",16,["D",1749844410312],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { drizzle } from \"npm:drizzle-orm/libsql\";\nimport * as schema from \"./schema.ts\";\n\n// Create Drizzle instance with Val Town's sqlite\nexport const db = drizzle(sqlite as any);\n\n// Export schema for convenience\nexport { schema };",[],[186,355,372],"00bf364c-488d-11f0-8815-76b3cceeab13","e13233a9-d024-42a2-b289-8fba357412b2",["D",1749843088792],"# Database\n\nThis app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage data. Every Val Town account comes with a free SQLite database, hosted on [Turso](https://turso.tech/). This folder is broken up into two files:\n\n* `migrations.ts` - code to set up the database tables the app needs\n* `queries.ts` - functions to run queries against those tables, which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Migrations\n\nIn `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. \n\nThis \"migration\" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.\n\nSQLite has much more limited support for altering existing tables as compared to other databases. Often it's easier to create new tables with the schema you want, and then copy the data over. Happily LLMs are quite good at those sort of database operations, but please reach out in the [Val Town Discord](https://discord.com/invite/dHv45uN5RY) if you need help.\n\n## Queries\n\nThe queries file is where running the migrations happen in this app. It'd also be reasonable for that to happen in index.ts, or as is said above, for that line to be commented out, and only run when actual changes are made to your database schema.\n\nThe queries file exports functions to get and write data. It relies on shared types and data imported from the `/shared` directory.",[],[186,355,161],"00bf4434-488d-11f0-8815-76b3cceeab13",["D",1749843088792],[202,203,204,205,206],[186,355],["D",1749843088792],[201,207,208],[186],["D",1749843088792],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":49},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":91,"_92":51,"_93":94,"_95":96,"_97":45,"_98":99},"ctx",{"_78":-5,"_129":429,"_430":431,"_432":433,"_434":49,"_435":49,"_436":49,"_437":25,"_438":-5,"_439":-7,"_440":-7,"_441":156,"_442":49,"_443":49,"_444":-5,"_445":49,"_446":49,"_447":49,"_448":-5},"ENV",{"_400":401,"_402":403,"_404":86,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424,"_425":426,"_427":428},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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 · v73