180- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
181- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
182- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`
183- Ensure all React dependencies and sub-dependencies are pinned to the same version
184- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
185
266 - Always run table creation before querying
267
2683. **React Configuration:**
269 - All React dependencies must be pinned to 18.2.0
270 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
271 - Rendering issues often come from mismatched React versions
272
2734. **File Handling:**
42* Use Deno.env.get('keyname') for environment variables
43* Import npm/deno dependencies via https://esm.sh
44* When using React, pin to version 18.2.0 with ?deps=react@18.2.0,react-dom@18.2.0
45```
46
46 If needed and if the user asks for something that requires persistence, use Val Town SQLite or Blob storage. Use the val's `import.meta.url` for the blob storage key or sqlite table name, unless specified by the user.
47
48 * If you use any React library, use esm.sh and pin its React version to 18.2.0 and its ReactDOM version to 18.2.0 by adding `?deps=react@18.2.0,react-dom@18.2.0` to the end of the URL. If the user is facing a client-side error where nothing is being rendered, check if all React dependencies and sub-dependencies are pinned to the same version, including the @jsxImportSource pragma.
49</requirements>
50
148```val type=http
149/** Use this template when you create http vals only */
150/** @jsxImportSource https://esm.sh/react@18.2.0 */
151import React from "https://esm.sh/react@18.2.0";
152import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
153
154/**
113- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
114- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names
115- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma
116- When facing client-side render issues, check if all React dependencies are pinned to the same version
117- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>`, use dark and light themes, unless otherwise specified
118
226
227### Frontend Best Practices
228- Structure as a standard client-side React app
229- Use SVG for favicons (Val Town only supports text files)
230- Separate components into individual files
231- Access bootstrapped data from `window.__INITIAL_DATA__`
232- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
233- Follow the React component pattern from the example project
234- Handle API calls properly with proper error catching
235
253 - Always run table creation before querying
254
2553. **React Configuration:**
256 - All React dependencies must be pinned to 18.2.0
257 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
258 - Rendering issues often come from mismatched React versions
259
2604. **File Handling:**
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4// Learn more: https://docs.val.town/vals/http/jsx/
5export const reactExample = (request: Request) =>
6 new Response(renderToString(<div>Test {1 + 1}</div>), {
7 headers: {
1/** @jsxImportSource https://esm.sh/react@19 */
2import { useQuery } from 'https://esm.sh/@tanstack/react-query@5'
3import { Braces, IdCard, PanelBottom } from 'https://esm.sh/lucide-react@0.510.0'
4import { useParams } from 'https://esm.sh/react-router@7'
5
6import { Debug, NavOutlet, PaddedError, PaddedSpinner } from '../components/ui.tsx'
1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from 'https://esm.sh/@farcaster/frame-sdk'
3import { Route, Routes, useLocation, useNavigate } from 'https://esm.sh/react-router@7'
4import { useEffect, useState } from 'https://esm.sh/react@19'
5
6import { Analytics } from './components/Analytics.tsx'
98 {/* <h2 className="">Features:</h2> */}
99 <div className="opacity-50">
100 <div className="">✷ Hono + React + Tailwind</div>
101 <div className="">✷ React Router + React Query</div>
102 <div className="">✷ Built-in database (blob storage)</div>
103 <div className="">✷ Farcaster mini app manifest + webhook + embed metadata</div>
1/** @jsxImportSource https://esm.sh/react@19 */
2import { LayoutGrid, ArrowUpRight } from 'https://esm.sh/lucide-react@0.510.0'
3import { useNavigate } from 'https://esm.sh/react-router@7'
4
5import { PaddedError, PaddedSpinner, Section, Button } from '../components/ui.tsx'
1/** @jsxImportSource https://esm.sh/react@19 */
2import { Search } from 'https://esm.sh/lucide-react@0.510.0'
3import { NavLink, useNavigate } from 'https://esm.sh/react-router@7'
4import { useState } from 'https://esm.sh/react@19'
5
6import { Button, Input, PaddedError, Section } from '../components/ui.tsx'
189- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
190- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
191- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`
192- Ensure all React dependencies and sub-dependencies are pinned to the same version
193- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
194
275 - Always run table creation before querying
276
2773. **React Configuration:**
278 - All React dependencies must be pinned to 18.2.0
279 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
280 - Rendering issues often come from mismatched React versions
281
2824. **File Handling:**
