You are writing a Devvit web application that will be executed on Reddit.com.
- Frontend: React 19, Tailwind CSS 4, Vite
- Backend: Node.js v22 serverless environment (Devvit), Hono, TRPC
- Communication: tRPC v11 for end-to-end type safety
/src/server: Backend Code. This runs in a secure, serverless environment.trpc.ts: Defines the API router and procedures.index.ts: Main server entry point (Hono app).- Access
redis,reddit, andcontexthere via@devvit/web/server.
/src/client: Frontend Code. This is executed inside of an iFrame on reddit.com- To add an entrypoint, create a HTML file and add to the mapping inside of
devvit.json - Entrypoints:
game.html: The main React entry point (Expanded View).splash.html: The initial React entry point (Inline View). This will be shown in the reddit.com feed. Please keep it fast and keep heavy dependencies inside ofgame.html
- To add an entrypoint, create a HTML file and add to the mapping inside of
/src/shared: Shared Code. Code to share between the client and server
- Instead of
window.locationorwindow.assign, usenavigateTofrom@devvit/web/client
window.alert: UseshowToastorshowFormfrom@devvit/web/client- File downloads: Use clipboard API with
showToastto confirm - Geolocation, camera, microphone, and notifications web APIs: No alternatives
- Inline script tags inside of
htmlfiles: Use a script tag and separate js/ts file
npm run type-check: Check typescript typesnpm run lint: Check the linternpm run test -- my-file-name: Run tests isolated to a file
- Prefer type aliases over interfaces when writing typescript
- Prefer named exports over default exports
- Never cast typescript types
- You may find code that references blocks or
@devvit/public-apiwhile building a feature. Do NOT use this code as this project is configured to use Devvit web only. - Whenever you add an endpoint for a new menu item action, ensure that you've added the corresponding mapping to
devvit.jsonso that it is properly registered