{"id":23534966,"url":"https://github.com/artlu99/framesv2-remix-cf","last_synced_at":"2025-11-01T00:30:26.952Z","repository":{"id":269758585,"uuid":"908359768","full_name":"artlu99/framesv2-remix-cf","owner":"artlu99","description":"an opinionated Farcaster Frames V2 starter built on Remix and CF Pages","archived":false,"fork":false,"pushed_at":"2025-02-10T23:50:29.000Z","size":659,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-11T00:28:58.264Z","etag":null,"topics":["farcaster","farcaster-frame","farcaster-frames"],"latest_commit_sha":null,"homepage":"https://frames.artlu.xyz/pinned/6546","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/artlu99.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-25T21:23:42.000Z","updated_at":"2025-02-10T23:50:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"7f899929-b22c-4771-80c0-d99e9844df8f","html_url":"https://github.com/artlu99/framesv2-remix-cf","commit_stats":null,"previous_names":["artlu99/framesv2-remix-cf"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artlu99%2Fframesv2-remix-cf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artlu99%2Fframesv2-remix-cf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artlu99%2Fframesv2-remix-cf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artlu99%2Fframesv2-remix-cf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artlu99","download_url":"https://codeload.github.com/artlu99/framesv2-remix-cf/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239242114,"owners_count":19605954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["farcaster","farcaster-frame","farcaster-frames"],"created_at":"2024-12-26T01:14:03.034Z","updated_at":"2025-11-01T00:30:26.892Z","avatar_url":"https://github.com/artlu99.png","language":"TypeScript","funding_links":[],"categories":["Developer Resources"],"sub_categories":["Farcaster Frames"],"readme":"# Farcaster Frames V2 Starter on Remix and Cloudflare\n\n## Wat is dis\n\nIf you luurve `Next.js` on `Vercel`, check out [Demo](https://github.com/farcasterxyz/frames-v2-demo) by the Warpcast team, or [Stephan](http://warpcast.com/stephancill)'s [Frames v2 Starter](https://github.com/stephancill/frames-v2-template) and [limone.eth](http://warpcast.com/limone.eth)'s [Frames v2 Starter Kit](https://github.com/builders-garden/frames-v2-starter) all on Next.\n\nIf not, keep reading! 👇👇👇\n\nThis starter is meant for anyone who wants to quickly build a Farcaster Frame V2, with a focus on lightning-fast DX and gtm. It is not meant to showcase bleeding-edge features of the Frames v2 spec, nor to enable devs to re-build common Frames infrastructure such as auth or a notifications service.\n\n## Local Development [~60 seconds to localhost:5173]\n\n```sh\ngit clone https://github.com/artlu99/framesv2-remix-cf [your-folder-name]\n\ncd [your-folder-name]\n\npnpm i\n\npnpm dev\n```\n\n[PRO TIP]: develop locally at 400x567, which is viewable window on a Gen 2 iPhone SE. If you use the native button, expect users to need to scroll vertically.\n\n## Deployment [~30 seconds to live]\n\n### \"Bish bash bingo bongo\", a.k.a. accept the defaults and go\n\n- update project name in `wrangler.toml`\n- deploy to Cloudflare Pages using `pnpm run deploy`\n- pay attention to the deployment branch name, update in `package.json` as necessary\n- [ONE-TIME OPTIONAL, BUT RECOMMENDED]. Assign `Custom domain` via Cloudflare dashboard. Sign manifest in Warpcast, update `/public/.well-known/farcaster.json` and re-deploy\n\n## Optional batteries included\n\n***permissionless install, managed user notifications, auth, redis, postgres***\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand/collapse\u003c/summary\u003e\n\n### Enable users to install your frame\n\n- update `/public/.well-known/farcaster.json`\n- icons can be changed later, but caching can cause issues / delays. *Avoid headaches later; try to get it right before Warpcast scrapes your site.*\n\n### Managed notifications\n\n- set up an app with [Neynar](https://dev.neynar.com/app). Details [[here]](https://docs.neynar.com/docs/send-notifications-to-frame-users)\n- for local dev, update environment variable in `.dev.vars` (not checked into git, but follow `dev.vars.example`)\n- update `NEYNAR_FRAME_WEBHOOK_URL` env variable as a secret via Cloudflare dashboard (do not use `wrangler.toml` for secrets!)\n\n### Privy seamless Farcaster login\n\n- set up an application with [Privy](https://dashboard.privy.io). Follow Steps 1 and 2 [[here]](https://docs.privy.io/guide/react/recipes/misc/farcaster-frames#build-a-farcaster-frame-with-privy). This starter implements Steps 3 and 4 for you!\n- update `/app/config.json` with your Privy `appId`\n\n### Redis\n\n- set up an [Upstash Redis](https://upstash.com) instance via their dashboard\n- this starter shares data across dev and prod environments. It does not expose the Redis connection to browsers; only the server-side Remix loader has access to it\n\n\u003cdetails\u003e\n\u003csummary\u003eSecrets setup\u003c/summary\u003e\n\n- copy **two (2)** secrets from the `REST API` -\u003e `.env` section. Ensure you have copied the actual token, and not a bunch of asterisks to your clipboard (*don't ask me how I know!*)\n- update secrets via Cloudflare dashboard (do not use `wrangler.toml` for secrets!)\n- for local dev, update environment variables in `.dev.vars` (not checked into git, but follow `dev.vars.example`)\n\n\u003c/details\u003e\n\n### Postgres\n\n- set up [Neon Postgres](https://neon.tech) via their dashboard\n- this starter shares data across dev and prod environments. It does not expose the Postgres connection to browsers; only the server-side Remix loader has access to it\n\n\u003cdetails\u003e\n\u003csummary\u003eSecrets setup\u003c/summary\u003e\n\n- copy **one (1)** secret from the `Connection Details` -\u003e `Connection string` section\n- update secrets via Cloudflare dashboard (do not use `wrangler.toml` for secrets!)\n- for local dev, update environment variables in `.dev.vars` and `.env` (not checked into git, but follow the example files)\n- run `pnpm run migrate` to create the database and tables\n\n\u003c/details\u003e\n\n\u003c/details\u003e\n\n## Opinionated Features\n\nThis starter emphasizes iteration speed and type-safety.\n\nIt postpones scale decisions by leaning on serverless site generation, stateless connections and edge datastores.\n\nIt expects zero cost-to-launch, and the first bottleneck is expected to be the Privy plan (at ~150 users). Neynar is currently $9/month until much higher loads, and the plan includes many other useful features for Farcaster devs. Hosting and data should remain performant on the free tiers until much later. YMMV.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick to expand/collapse a nerd list 🤓\u003c/summary\u003e\n\n1. `Remix` on `Cloudflare Pages`, for light, fast SSR with familiar `React` mental models. *Serverless that feels like a long-lived server*\n2. `Vite` for lightning-fast local development with HMR\n3. `Hono Stack` for end-to-end type safety, zero codegen and *de minimis* boilerplate\n4. `Kysely` Typescript query builder and migration scripts\n5. `shadcn/ui` `TailwindCSS` components, `Framer` motion animations\n6. `Upstash Redis` and `Neon Postgres` as edge, scalable datastores on stateless connections\n7. Seamless Farcaster login via `Privy` [[details]](https://docs.privy.io/guide/react/recipes/misc/farcaster-frames#build-a-farcaster-frame-with-privy), with easy pathway to providing embedded wallets\n8. webhook logging, optionally verified and/or managed via `Neynar` (see [[docs]](https://docs.neynar.com/reference/fetch-notification-tokens)). Send managed notifications [[here]](https://docs.neynar.com/reference/publish-frame-notifications)\n9. `Biome` linting  at the speed of Rust. `pnpm` because it's 2025.\n10. BYO: test suite, CI/CD, local frame debugger\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand/collapse a nerd table 🏓\u003c/summary\u003e\n\n## comparison with Warpcast Demo Repo\n\n| Feature                     | artlu Starter                     | Warpcast Demo Repo               |\n|-----------------------------|-----------------------------------|----------------------------------|\n| Framework                   | Remix                             | Next App router                          |\n| Local Development Tool      | Vite                              | Next                 |\n| UI components                   | shadcn/ui                          | Radix + TailwindCSS                 |\n| End-to-End Type Safety                 | Hono Stack                        | nah, we have Zod at home                    |\n| Datastores                    | Upstash Redis, Neon Postgres (optional)    | Vercel KV (Redis)                    |\n| Notifications               | Neynar (optional)                            | integrated + Neynar Hub verification                   |\n| Authentication              | Privy (optional)                             | SIWF on NextAuth                  |\n| Deployment                   | Cloudflare Pages                  | Vercel                           |\n| Dynamic OG Generation     | separate microservice             | integrated                       |\n| Linting and Formatting      | Biome                             | ESLint, Prettier                 |\n| CI/CD                       | bring-your-own                     | Vercel + GitHub Actions (default)                   |\n| testing                       | bring-your-own                     | bring-your-own                   |\n| Edge Functions              | Yes                               | Yes                              |\n| Cost Efficiency             | Free tiers recommended            | Free tiers recommended           |\n| Philosophy             | serverless V8            | long-lived Node server + Edge serverless           |\n\n\u003c/details\u003e\n\n## Some Frames V2 built on this starter\n\n1. \u003chttps://frames.artlu.xyz/pinned/6546\u003e (artlu) and \u003chttps://frames.artlu.xyz/pinned/5650\u003e (Vitalik)\n\n2. \u003chttps://pisss.artlu.xyz/\u003e \"real-time\" International Space Station Urine Tank monitor in a frame\n\n3. \u003chttps://xzibit.artlu.xyz/\u003e Yo dawg, I heard you like frames, so I put a website in your frame, so you can browse while you frame\n\n4. \u003chttps://ohpuc.artlu.xyz/\u003e one hundred push up club frame on Farcaster\n\n### Notes\n\n1. dynamic OG image generation is a separate microservice. FOSS and MIT Licensed [[here]](https://github.com/artlu99/cached-dynamic-og-generator-cf).\n2. Neon supports painless database branching, which is a great feature for development. Out of scope for this starter.\n3. when you need the full Cloudflare environment, first run `pnpm build` and then `pnpm start` *(this should be rare)*.\n4. the framework is ready for `TailwindCSS v4`, and some frames built on this starter are already using it. However, some edge cases with `shadcn/ui` and `vite` + `Remix` should get ironed out soon. Suggest upgrading after `shadcn/ui` gets CLI support.\n\n## Thanks\n\n- [@horsefacts](https://github.com/horsefacts), [@deodad](https://github.com/deodad) and [@cmlad](https://github.com/cmlad) for [Demo](https://github.com/farcasterxyz/frames-v2-demo) and \u003chttps://framesv2.com\u003e\n- [jiangsi](https://github.com/jiangsi) for Remix on Cloudflare Pages template\n- [Yusuke Wada](https://github.com/yusukebe) for Hono 🔥\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartlu99%2Fframesv2-remix-cf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartlu99%2Fframesv2-remix-cf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartlu99%2Fframesv2-remix-cf/lists"}