{"id":23756645,"url":"https://github.com/matthewlynch/react-router-cloudflare-d1","last_synced_at":"2025-09-05T03:31:03.731Z","repository":{"id":270373016,"uuid":"909448026","full_name":"matthewlynch/react-router-cloudflare-d1","owner":"matthewlynch","description":"A template for React Router (v7) on Cloudflare Workers with D1","archived":false,"fork":false,"pushed_at":"2025-01-22T05:12:53.000Z","size":145,"stargazers_count":14,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T22:05:27.582Z","etag":null,"topics":["cloudflare","react","react-router","workers","workers-d1"],"latest_commit_sha":null,"homepage":"https://react-router-cloudflare-d1.mattlynch.workers.dev","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/matthewlynch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-28T18:24:45.000Z","updated_at":"2025-03-20T14:35:32.000Z","dependencies_parsed_at":"2024-12-30T17:27:08.656Z","dependency_job_id":"b6040389-d68d-4eba-b4b3-1e0fbeb1b2ec","html_url":"https://github.com/matthewlynch/react-router-cloudflare-d1","commit_stats":null,"previous_names":["matthewlynch/react-router-cloudflare-d1"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/matthewlynch/react-router-cloudflare-d1","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewlynch%2Freact-router-cloudflare-d1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewlynch%2Freact-router-cloudflare-d1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewlynch%2Freact-router-cloudflare-d1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewlynch%2Freact-router-cloudflare-d1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matthewlynch","download_url":"https://codeload.github.com/matthewlynch/react-router-cloudflare-d1/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewlynch%2Freact-router-cloudflare-d1/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273707163,"owners_count":25153707,"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","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cloudflare","react","react-router","workers","workers-d1"],"created_at":"2024-12-31T19:18:08.391Z","updated_at":"2025-09-05T03:30:58.711Z","avatar_url":"https://github.com/matthewlynch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to React Router on Cloudflare Workers with D1!\n\nA modern, production-ready template for building full-stack React applications using React Router, hosted on Cloudflare Workers with D1 as the database.\n\nYou can quickly create a new React Router application from this template by running:\n\n```\nnpx create-react-router@latest --template matthewlynch/react-router-cloudflare-d1\n```\n\nSome of the code in this repo was adapted from the [React Router Cloudflare D1 template](https://github.com/remix-run/react-router-templates/tree/main/cloudflare-d1).\n\n## Features\n\n- 🚀 Server-side rendering\n- ⚡️ Hot Module Replacement (HMR)\n- 📦 Asset bundling and optimization\n- 🔄 Data loading and mutations\n- 🔒 TypeScript by default\n- 🎉 TailwindCSS for styling\n- 🟧️ Setup to deploy to Cloudflare Workers\n- 📊 Cloudflare D1 database for production and SQLite database for local development\n- 📜 Pre-render routes at build time\n- 🌍 Separate environments for preview and production\n- 📟 [`cloudflareDevProxy`](https://github.com/remix-run/remix/blob/main/packages/remix-dev/vite/cloudflare-proxy-plugin.ts) to make Cloudflare bindings work locally\n- 📖 [React Router docs](https://reactrouter.com/)\n- 📖 [Cloudflare Workers docs](https://developers.cloudflare.com/workers/)\n- 📖 [D1 database docs](https://developers.cloudflare.com/d1/)\n\n## Getting Started\n\n1. Run `cp .dev-example.vars .dev.vars` to create an .env file you can use to override variables defined in `wrangler.toml` or set secret values you don't want to check into source control\n2. Update the `name` field in `wranlger.toml`\n3. Install dependencies `pnpm install`\n4. Create a database by running [`wrangler d1 create \u003cname\u003e`](https://developers.cloudflare.com/d1/wrangler-commands/#d1-create) and update `wranlger.toml` with the UUID and name for the database\n   1. Create an additional database for the \"preview\" environment and update `env.preview.d1_databases` in `wranlger.toml` with the UUID and name for the preview database\n   2. OR delete `env.preview*` if you don't want to deploy a preview version of your app\n5. Add your Cloudflare Account ID/Database UUID/Token to `.dev.vars` (you only need this when you want to view data via Drizzle Studio for your remote database)\n6. Run `pnpm typegen` any time you make changes to `wranlger.toml` to ensure types from bindings and module rules are up to date for type safety\n\n### Development\n\nRun an initial database migration:\n\n```bash\npnpm db:migrate\n```\n\nStart the development server with HMR:\n\n```bash\npnpm dev\n```\n\nYour application will be available at [`http://localhost:5173`](http://localhost:5173).\n\n### Database\n\nYou can develop against a local SQLite database then push changes to your remote D1 database.\n\n#### Workflow\n\n1. Make changes to the schema in `./database/schema.ts`\n2. Run `pnpm db:generate` to generate SQL migration files\n3. Run `pnpm db:migrate` to apply the generated migration files to your local SQLite database\n4. Run `pnpm db:migrate:production` to apply the changes to your remote D1 database\n\n#### Viewing data (via Drizzle Studio)\n\nRun `pnpm db:studio` to browse data in your local database on disk or `pnpm db:studio:production` to browse your remote D1 database.\n\nYou need to have added your Cloudflare Account ID/Database UUID/Token to `.dev.vars` if you want to run `pnpm db:studio:production`.\n\n#### Creating a Cloudflare token for Drizzle Studio\n\n1. Log in to Cloudflare and visit https://dash.cloudflare.com/profile/api-tokens and click \"Create Token\"\n2. Scroll down to \"Create Custom Token\" and click on \"Get Started\"\n3. Enter a name for the token\n4. \"Permissions\" needs to be set to \"Account\" / \"D1\" / \"Edit\"\n5. Click \"Continue to summary\" and copy the token value so you can set the `CLOUDFLARE_TOKEN` environment variable in `.dev.vars`\n\n## Building for Production\n\nCreate a production build:\n\n```bash\npnpm build\n```\n\n## Deployment\n\nDeployment is done using the Wrangler CLI.\n\nMake sure you have run `pnpm db:generate` \u0026 `pnpm db:migrate:production` so the deployed app can query the database.\n\nTo deploy directly to production from your machine:\n\n```sh\nnpx wrangler deploy\n```\n\nOr to deploy to the preview environment:\n\n```sh\nnpx wrangler versions upload --env preview\n```\n\nThe CLI will output the URL you can use to view the app and the UUID of the deployment.\n\nYou can then promote a version to production after verification or roll it out progressively.\n\n```sh\nnpx wrangler versions deploy\n```\n\nSelect the UUID of the deployment you want to promote.\n\n## Continuous deployment via GitHub\n\nYou can configure CD via GitHub once you have run the deployment steps above\n\n1. Visit the \"Workers \u0026 Pages\" page in the Cloudflare Dashboard\n2. Click on the worker you deployed (the name will match what is defined in `wrangler.toml#name` field)\n3. Click \"Settings\"\n4. Scroll down to \"Build\" and click on \"Connect\"\n5. Select your repository and branch\n6. Click \"connect\"\n7. Push changes to the repo for automatic deployments\n\n## Styling\n\nThis template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.\n\n---\n\nBuilt with ❤️ by [Matt](https://mattlynch.dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewlynch%2Freact-router-cloudflare-d1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatthewlynch%2Freact-router-cloudflare-d1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewlynch%2Freact-router-cloudflare-d1/lists"}