{"id":24366968,"url":"https://github.com/qinsong77/cloudflare-react-router-hono-app","last_synced_at":"2026-04-11T06:42:22.227Z","repository":{"id":273113228,"uuid":"918725401","full_name":"qinsong77/cloudflare-react-router-hono-app","owner":"qinsong77","description":"This is a Full Stack app starter with the foundational things setup with Cloudflare workers D1 \u0026 KV, D1, Hono, react router v7, totally self-control","archived":false,"fork":false,"pushed_at":"2025-09-05T02:56:59.000Z","size":552,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-27T15:18:47.171Z","etag":null,"topics":["cloudflare","d1","hono","kv","react","react-router-v7","workers"],"latest_commit_sha":null,"homepage":"https://rrv7-hono-app.wakershadow.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/qinsong77.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-18T17:38:12.000Z","updated_at":"2025-09-05T02:57:03.000Z","dependencies_parsed_at":"2025-01-18T19:29:57.079Z","dependency_job_id":"e5b15097-0ad8-424c-9724-02ba0bd074b2","html_url":"https://github.com/qinsong77/cloudflare-react-router-hono-app","commit_stats":null,"previous_names":["qinsong77/cloudflare-react-router-hono-app"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/qinsong77/cloudflare-react-router-hono-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qinsong77%2Fcloudflare-react-router-hono-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qinsong77%2Fcloudflare-react-router-hono-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qinsong77%2Fcloudflare-react-router-hono-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qinsong77%2Fcloudflare-react-router-hono-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qinsong77","download_url":"https://codeload.github.com/qinsong77/cloudflare-react-router-hono-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qinsong77%2Fcloudflare-react-router-hono-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31671629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"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","d1","hono","kv","react","react-router-v7","workers"],"created_at":"2025-01-19T01:10:43.237Z","updated_at":"2026-04-11T06:42:22.163Z","avatar_url":"https://github.com/qinsong77.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cloudflare React Router 7 Hono App\n\nCreated by `create cloudflare@latest cloudflare-react-router-hono-app -- --framework=react-router`\n\nRefer: [Cloudflare Framework Guide - React Router (formerly Remix)](https://developers.cloudflare.com/workers/framework-guides/web-apps/react-router/)\n\nCheck [https://rrv7-hono-app.wakershadow.workers.dev/](https://rrv7-hono-app.wakershadow.workers.dev/) for demo\n\n## [v1](https://github.com/qinsong77/cloudflare-react-router-hono-app/tree/v1)\n\nV1 features (legacy approach):\n\n- Enable Cloudflare Workers, D1 and KV work with Hono server, react router and server all by customer dev server and wrap customer `wrangler` locally\n- No extra vite packages for local development, totally self-control, check the [dev-server.js](./dev-server.js)\n- Powered by `getPlatformProxy` from wrangler, refer [dev-platform middleware](server/middleware/dev-platform.ts)\n\n**Note**: Current version uses `@cloudflare/vite-plugin` instead of the custom dev server approach from v1.\n\n## Features\n\n- **Full-Stack Integration**: Seamless integration between Hono server and React Router 7\n- **Cloudflare Platform**: Native support for Cloudflare Workers, D1 Database, and KV Storage\n- **Modern Development**: Powered by `@cloudflare/vite-plugin` for seamless local development\n- **Modern Tech Stack**:\n  - React Router 7 with SSR/SSG/CSR support\n  - Hono.js for high-performance server-side logic\n  - Drizzle ORM with D1 database\n  - TypeScript throughout the entire stack\n  - Tailwind CSS with Shadcn/UI components\n- **Context Sharing**: Direct access to Hono context in React Router loaders\n- **Authentication**: Built-in authentication system with session management\n- **Database Migrations**: Automated database schema management\n- **Type Safety**: End-to-end TypeScript support with proper type generation\n\n## Tech Stack\n\n### Frontend\n\n- **React Router 7** - Full-stack web framework with SSR/SSG/CSR support\n- **React 19** - Latest React with concurrent features\n- **TypeScript** - Type-safe development\n- **Tailwind CSS** - Utility-first CSS framework\n- **Shadcn/UI** - High-quality, accessible UI components\n\n### Backend\n\n- **Hono.js** - Fast, lightweight web framework for Cloudflare Workers\n- **Cloudflare Workers** - Serverless compute platform\n- **D1 Database** - Serverless SQL database\n- **KV Storage** - Global key-value storage\n- **Drizzle ORM** - TypeScript ORM with excellent DX\n\n### Development Tools\n\n- **Vite** - Fast build tool and dev server\n- **ESLint** - Code linting and formatting\n- **Prettier** - Code formatting\n- **Husky** - Git hooks\n- **Commitlint** - Commit message linting\n- **Wrangler** - Cloudflare Workers CLI\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm (recommended) or npm\n- Cloudflare account (for deployment)\n\n### First-time Cloudflare Setup\n\nIf you don't have Cloudflare resources set up yet:\n\n1. **Create a D1 database**\n\n   ```bash\n   wrangler d1 create your-database-name\n   ```\n\n2. **Create a KV namespace**\n\n   ```bash\n   wrangler kv namespace create your-kv-name\n   ```\n\n3. **Update your `wrangler.toml`** with the generated IDs and names\n\n### Installation\n\n1. **Install dependencies**\n\n   ```bash\n   pnpm install\n   ```\n\n2. **Set up the database**\n\n   ```bash\n   # Generate database migrations(You can delete the migrations folder to regenerate)\n   pnpm run db:generate\n\n   # Apply migrations to local D1 database(replace `DB` with your database name in script)\n   pnpm run db:migrate-local\n   ```\n\n3. **Configure Cloudflare**\n   - Copy `wrangler.example.jsonc` to `wrangler.jsonc`\n   - Update the configuration with your Cloudflare account details:\n     - Replace `your-database-name` and `your-database-id` with your D1 database details\n     - Replace `your-kv-namespace-id` with your KV namespace ID\n     - Update the worker name if needed\n\n4. **Start development server**\n\n   ```bash\n   pnpm run dev\n   ```\n\n   The application will be available at `http://localhost:5173`\n\n## Deployment\n\nTo deploy your application to Cloudflare Workers:\n\n1. **Build and deploy**\n\n   ```bash\n   pnpm run deploy\n   ```\n\n2. **Apply database migrations to production**\n   ```bash\n   pnpm run db:migrate-production\n   ```\n\nThe application will be deployed to your Cloudflare Workers account and accessible via your worker URL.\n\n## Available Scripts\n\n### Development\n\n- `pnpm run dev` - Start development server\n- `pnpm run preview` - Preview production build locally\n\n### Database\n\n- `pnpm run db:generate` - Generate database migrations\n- `pnpm run db:migrate-local` - Apply migrations to local D1 database (replace DB with your database name)\n- `pnpm run db:migrate-production` - Apply migrations to production D1 database (replace DB with your database name)\n\n### Build \u0026 Deploy\n\n- `pnpm run build` - Build the application for production\n- `pnpm run deploy` - Build and deploy to Cloudflare Workers\n\n### Code Quality\n\n- `pnpm run lint` - Run ESLint\n- `pnpm run lint-and-format:fix` - Fix linting and formatting issues\n- `pnpm run format` - Check code formatting\n- `pnpm run format:fix` - Fix code formatting\n- `pnpm run typecheck` - Run TypeScript type checking\n\n### Type Generation\n\n- `pnpm run typegen:cf` - Generate Cloudflare Workers types\n\n## Project Structure\n\n```\n├── app/                    # React Router 7 application\n│   ├── components/         # Reusable UI components\n│   ├── features/          # Feature-based modules\n│   ├── routes/            # Route definitions\n│   └── ...\n├── server/                # Hono server application\n│   ├── routes/            # API route handlers\n│   ├── d1/               # Database schema and queries\n│   └── middleware/       # Server middleware\n├── shared/               # Shared utilities\n└── migration/            # Database migrations\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqinsong77%2Fcloudflare-react-router-hono-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqinsong77%2Fcloudflare-react-router-hono-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqinsong77%2Fcloudflare-react-router-hono-app/lists"}