从 CLI 开始 — 使用 Hono API、React SPA 和 Cloudflare Vite 插件 搭建全栈应用，获得极速开发体验。
npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-templateyarn create cloudflare my-hono-app --template=cloudflare/templates/vite-react-templatepnpm create cloudflare@latest my-hono-app --template=cloudflare/templates/vite-react-template或直接部署 — 使用 Hono、React 和 Vite 创建全栈应用，CI/CD 与预览均已为你配置好。
Hono ↗ 是一个超轻量、高性能的 Web 应用框架，与 Cloudflare Workers 配合极佳。 配合 Workers Assets，你可以轻松将在 Workers 上运行的 Hono API 与 SPA 结合，创建全栈应用。
-
使用 create-cloudflare CLI (C3) 创建新项目
npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-templateyarn create cloudflare my-hono-app --template=cloudflare/templates/vite-react-templatepnpm create cloudflare@latest my-hono-app --template=cloudflare/templates/vite-react-template此项目是如何设置的？
以下是项目的简化文件树。
- my-hono-app
- src
- worker/
- index.ts
- react-app/
- worker/
- index.html
- vite.config.ts
- wrangler.jsonc
- src
wrangler.jsonc是你的 Wrangler 配置文件。 在此文件中：main指向src/worker/index.ts。这是你的 Hono 应用，将在 Worker 中运行。assets.not_found_handling设置为single-page-application，意味着由 SPA 处理的路由不会进入 Worker，因此免费。- 若要为 Cloudflare 开发者平台资源添加绑定（binding），在此配置。阅读更多关于绑定（binding）的信息。
vite.config.ts配置为使用 Cloudflare Vite 插件。这会在 Cloudflare Workers 运行时中运行 Worker，确保本地开发环境尽可能接近生产环境。src/worker/index.ts是你的 Hono 应用，初始包含单个端点/api。 在src/react-app/src/App.tsx中，React 应用调用此端点获取消息并在 SPA 中显示。 - my-hono-app
-
使用 Cloudflare Vite 插件 在本地开发
创建项目后，在项目目录中运行以下命令以启动本地开发服务器。
npm run devyarn run devpnpm run dev本地开发中发生了什么？
此项目使用 Vite 进行本地开发和构建，因此具备 Vite 的所有功能，包括热模块替换（HMR）。
此外，
vite.config.ts配置为使用 Cloudflare Vite 插件。这会在 Cloudflare Workers 运行时中运行应用，与生产环境一致，并支持访问绑定的本地模拟。 -
部署项目
你可以从本地机器或任何 CI/CD 系统（包括 Cloudflare 自有的 Workers Builds）将项目部署到
*.workers.dev子域或自定义域名。以下命令将构建并部署项目。若使用 CI，请确保相应更新你的 「deploy command」 配置。
npm run deployyarn run deploypnpm run deploy
Hono 文档 ↗ 介绍了如何在 Hono 应用中访问绑定（binding）。
通过绑定（binding），你的应用程序可以与 Cloudflare Developer Platform 完全集成，让你访问计算、存储、AI 等功能。