\n A minimal Remix 3 SSR example on Val Town —\n view source.\n

\n\n \n \n \n `;\n}\n\nconst router = createRouter();\n\nrouter.map(routes.home, {\n actions: {\n // GET / — render the page with the current server time\n index() {\n return createHtmlResponse(page(new Date().toLocaleString()));\n },\n // POST / — re-render the page with a freshly-stamped server time\n action() {\n return createHtmlResponse(page(new Date().toLocaleString()));\n },\n },\n});\n\n// Send people to the source on Val Town\nrouter.get(route({ source: \"/source\" }).source, () =>\n Response.redirect(\n \"https://www.val.town/x/stevekrouse/remix-3-beta-demo/code/main.ts\",\n 302,\n ),\n);\n\nexport default (request: Request) => router.fetch(request);\n",[142],"03c41f20-44d0-11f1-95be-42b51c65c3df","db.ts","03c41fca-44d0-11f1-95be-42b51c65c3df",7,["D",1777579563211],"// Tiny data layer for the message board, using Val Town's per-val SQLite.\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport interface Topic {\n id: number;\n title: string;\n createdAt: string;\n}\n\nexport interface Message {\n id: number;\n topicId: number;\n content: string;\n createdAt: string;\n}\n\nlet initialized: Promise | null = null;\n\n/** Create tables on first use, and seed with a welcome topic if empty. */\nexport function ensureSchema(): Promise {\n if (initialized) return initialized;\n initialized = (async () => {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS topics (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n createdAt TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n topicId INTEGER NOT NULL REFERENCES topics(id) ON DELETE CASCADE,\n content TEXT NOT NULL,\n createdAt TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE INDEX IF NOT EXISTS idx_messages_topicId\n ON messages(topicId)`,\n },\n ]);\n\n // Seed if empty so the demo has something to look at on first load.\n const { rows } = await sqlite.execute(\"SELECT COUNT(*) AS n FROM topics\");\n if ((rows[0] as { n: number }).n === 0) {\n const seeded = await sqlite.execute({\n sql: \"INSERT INTO topics (title) VALUES (?) RETURNING id\",\n args: [\"Welcome to the Remix 3 message board!\"],\n });\n const topicId = (seeded.rows[0] as { id: number }).id;\n await sqlite.batch([\n {\n sql: \"INSERT INTO messages (topicId, content) VALUES (?, ?)\",\n args: [topicId, \"This whole thing is server-rendered HTML.\"],\n },\n {\n sql: \"INSERT INTO messages (topicId, content) VALUES (?, ?)\",\n args: [topicId, \"No client-side framework — just forms and links.\"],\n },\n ]);\n }\n })();\n return initialized;\n}\n\nexport async function listTopics(): Promise {\n const { rows } = await sqlite.execute(\n `SELECT t.id, t.title, t.createdAt\n FROM topics t\n ORDER BY (\n SELECT COALESCE(MAX(m.createdAt), t.createdAt)\n FROM messages m WHERE m.topicId = t.id\n ) DESC`,\n );\n return rows as unknown as Topic[];\n}\n\nexport async function getTopic(id: number): Promise {\n const { rows } = await sqlite.execute({\n sql: \"SELECT id, title, createdAt FROM topics WHERE id = ?\",\n args: [id],\n });\n return (rows[0] as unknown as Topic) ?? null;\n}\n\nexport async function listMessages(topicId: number): Promise {\n const { rows } = await sqlite.execute({\n sql: `SELECT id, topicId, content, createdAt\n FROM messages WHERE topicId = ? ORDER BY createdAt ASC, id ASC`,\n args: [topicId],\n });\n return rows as unknown as Message[];\n}\n\nexport async function getMessage(\n topicId: number,\n messageId: number,\n): Promise {\n const { rows } = await sqlite.execute({\n sql: `SELECT id, topicId, content, createdAt\n FROM messages WHERE topicId = ? AND id = ?`,\n args: [topicId, messageId],\n });\n return (rows[0] as unknown as Message) ?? null;\n}\n\nexport async function createTopic(title: string): Promise {\n const { rows } = await sqlite.execute({\n sql: \"INSERT INTO topics (title) VALUES (?) RETURNING id\",\n args: [title],\n });\n return (rows[0] as { id: number }).id;\n}\n\nexport async function createMessage(\n topicId: number,\n content: string,\n): Promise {\n const { rows } = await sqlite.execute({\n sql: \"INSERT INTO messages (topicId, content) VALUES (?, ?) RETURNING id\",\n args: [topicId, content],\n });\n return (rows[0] as { id: number }).id;\n}\n\nexport interface SearchResults {\n query: string;\n topics: Topic[];\n messages: (Message & { topicTitle: string })[];\n}\n\nexport async function search(query: string): Promise {\n const q = query.trim();\n if (!q) return { query: q, topics: [], messages: [] };\n const like = `%${q}%`;\n\n const [topicsRes, messagesRes] = await Promise.all([\n sqlite.execute({\n sql: `SELECT id, title, createdAt FROM topics\n WHERE title LIKE ? ORDER BY createdAt DESC LIMIT 50`,\n args: [like],\n }),\n sqlite.execute({\n sql: `SELECT m.id, m.topicId, m.content, m.createdAt, t.title AS topicTitle\n FROM messages m JOIN topics t ON t.id = m.topicId\n WHERE m.content LIKE ? ORDER BY m.createdAt DESC LIMIT 50`,\n args: [like],\n }),\n ]);\n\n return {\n query: q,\n topics: topicsRes.rows as unknown as Topic[],\n messages: messagesRes.rows as unknown as (Message & {\n topicTitle: string;\n })[],\n };\n}\n",[150],"0d304aac-44d0-11f1-a6a7-42b51c65c3df",["D",1777579579008],[28],"pulls","branches","forks","envVars",{"_166":137,"_168":137},"connections",{"_166":137,"_167":137},"count","unfilledCount","emptyCount",{"_44":156,"_33":28,"_31":32,"_133":-5,"_42":43,"_41":14,"_135":25,"_39":183,"_13":63,"_35":36,"_37":38,"_24":25,"_139":-5,"_174":184,"_27":185},{"_44":149,"_33":150,"_31":151,"_133":-5,"_42":43,"_41":152,"_135":25,"_39":180,"_13":137,"_35":36,"_37":154,"_24":25,"_139":-5,"_174":181,"_27":182},{"_44":141,"_33":142,"_31":57,"_133":-5,"_42":43,"_41":143,"_135":25,"_39":177,"_13":145,"_35":146,"_37":147,"_24":25,"_139":-5,"_174":178,"_27":179},{"_44":130,"_33":131,"_31":132,"_133":-5,"_42":43,"_41":134,"_135":25,"_39":173,"_13":137,"_35":36,"_37":138,"_24":25,"_139":-5,"_174":175,"_27":176},["D",1777579572386],"children",[],[131],["D",1777579524025],[],[142],["D",1777579563211],[],[150],["D",1777579579008],[],[28],["D",1777579337157],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_33":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"ctx",{"_79":-5,"_123":223,"_224":225,"_226":227,"_228":25,"_229":25,"_230":25,"_231":59,"_232":-5,"_233":-7,"_234":-7,"_235":137,"_236":25,"_237":25,"_238":-5,"_239":25,"_240":25,"_241":25,"_242":-5},"ENV",{"_194":195,"_196":197,"_198":87,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222},"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"]

Hello World!

Diff · v10