{"id":27765742,"url":"https://github.com/yusukebe/hono-vite-react-stack","last_synced_at":"2025-04-29T17:00:06.844Z","repository":{"id":285890019,"uuid":"959586894","full_name":"yusukebe/hono-vite-react-stack","owner":"yusukebe","description":"Vite plugin for Hono and React on Cloudflare Workers","archived":false,"fork":false,"pushed_at":"2025-04-25T07:25:15.000Z","size":205,"stargazers_count":89,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-29T17:00:00.569Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/hono-vite-react-stack","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yusukebe.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,"zenodo":null}},"created_at":"2025-04-03T03:01:06.000Z","updated_at":"2025-04-29T02:11:01.000Z","dependencies_parsed_at":"2025-04-25T08:25:00.012Z","dependency_job_id":"23d12e70-a72a-4dbc-8146-8d21f4d53e41","html_url":"https://github.com/yusukebe/hono-vite-react-stack","commit_stats":null,"previous_names":["yusukebe/hono-vite-react-stack"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusukebe%2Fhono-vite-react-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusukebe%2Fhono-vite-react-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusukebe%2Fhono-vite-react-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusukebe%2Fhono-vite-react-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yusukebe","download_url":"https://codeload.github.com/yusukebe/hono-vite-react-stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251546706,"owners_count":21606890,"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":[],"created_at":"2025-04-29T17:00:06.324Z","updated_at":"2025-04-29T17:00:06.818Z","avatar_url":"https://github.com/yusukebe.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# hono-vite-react-stack\n\n**_hono-vite-react-stack_** is a Vite plugin for creating web apps that run on Cloudflare Workers using Hono and React. The stack consists of the following.\n\n- **Hono** - Web application framework for server-side rendering with React. It is also possible to create APIs.\n- **React** - UI library. It can be used not only for server-side SSR, but also for client-side use.\n- **Tailwind CSS** - A CSS library.\n- **Cloudflare Workers** - You can deploy your application to Cloudflare Workers. It also emulates the Cloudflare Workers environment during development, just like Wrangler.\n- **Vite** - Used for the development server and build. By using this plugin, you can easily develop using this stack and build the server side and client side.\n\n## Try it out\n\n```bash\nnpx giget@latest gh:yusukebe/hono-vite-react-stack-example my-app\n```\n\n## Usage\n\nConfiguration file:\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport reactStack from 'hono-vite-react-stack'\n\nexport default defineConfig({\n  plugins: [reactStack()],\n})\n```\n\nStart development server:\n\n```bash\nvite dev\n```\n\nBuild:\n\n```bash\nvite build \u0026\u0026 vite build --ssr\n```\n\n## Conventions\n\nYou need to place the files as follows.\n\n- `src/server/index.tsx` - Hono application\n- `src/client/index.tsx` - Client entry point\n- `src/style.css` - CSS file\n\nIn addition, the following will be output when building.\n\n- `dist-server/index.js` - Server file\n- `dist/*` - Client files\n\n## Components\n\nComponents solve the problem of different file paths during development and build.\n\n### `Script` and `Link`\n\n```ts\nimport { Script, Link } from 'hono-vite-react-stack/components'\n\nexport const renderer = reactRenderer(({ children }) =\u003e {\n  return (\n    \u003chtml\u003e\n      \u003chead\u003e\n        \u003cmeta charSet='UTF-8' /\u003e\n        \u003cmeta name='viewport' content='width=device-width, initial-scale=1.0' /\u003e\n        \u003cScript /\u003e\n        \u003cLink href='/src/style.css' rel='stylesheet' /\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e{children}\u003c/body\u003e\n    \u003c/html\u003e\n  )\n})\n```\n\n## Guides\n\n### Change the client entry point\n\nIf you want to change the path of the client entry point, add a `src` attribute to the `Script` component and set the path.\n\n```tsx\n// src/client/main.tsx\nimport { Script, Link } from 'hono-vite-react-stack/components'\nimport { reactRenderer } from '@hono/react-renderer'\n\nexport const renderer = reactRenderer(({ children }) =\u003e {\n  return (\n    \u003chtml\u003e\n      \u003chead\u003e\n        {/**  Add src attribute to Script component */}\n        \u003cScript src='/src/client/main.tsx' /\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e{children}\u003c/body\u003e\n    \u003c/html\u003e\n  )\n})\n```\n\nFor the build, you can specify it in the `vite.config.ts`.\n\n```ts\n// vite.config.ts\nimport reactStack from 'hono-vite-react-stack'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    reactStack({\n      clientEntry: './src/client/main.tsx',\n    }),\n  ],\n})\n```\n\n## Example Project\n\nDirectory structure:\n\n```plain\n.\n├── package.json\n├── public\n├── src\n│   ├── client\n│   │   ├── app.tsx\n│   │   └── index.tsx\n│   ├── server\n│   │   ├── index.tsx\n│   │   └── renderer.tsx\n│   └── style.css\n├── tsconfig.json\n├── vite.config.ts\n├── worker-configuration.d.ts\n└── wrangler.jsonc\n```\n\n`wrangler.json`:\n\n```jsonc\n{\n  \"$schema\": \"node_modules/wrangler/config-schema.json\",\n  \"name\": \"hono-vite-react-stack-example-basic\",\n  \"compatibility_date\": \"2025-03-20\",\n  \"main\": \"./src/server/index.tsx\",\n  \"assets\": {\n    \"directory\": \"dist\",\n  },\n}\n```\n\nCommands:\n\n```json\n\"dev\": \"vite\",\n\"build\": \"vite build \u0026\u0026 vite build --ssr\",\n\"preview\": \"wrangler dev dist-server/index.js\",\n\"deploy\": \"$npm_execpath run build \u0026\u0026 wrangler deploy dist-server/index.js\",\n```\n\nSee more: https://github.com/yusukebe/hono-vite-react-stack-example\n\n## Author\n\nYusuke Wada \u003chttps://github.com/yusukebe\u003e\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusukebe%2Fhono-vite-react-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyusukebe%2Fhono-vite-react-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusukebe%2Fhono-vite-react-stack/lists"}