DEV Community
·
React + Hono项目的初始设置
内容提要
本文介绍了使用Vite创建React前端和Hono后端的Web应用初始设置，包括配置测试环境和实现API端点，最后提供了将应用部署到Cloudflare Workers的步骤。
关键要点
-
本文介绍了使用Vite创建React前端和Hono后端的Web应用初始设置。
-
假设已经安装Node.js和pnpm，设置在macOS上进行，但适用于任何现代shell环境。
-
创建React项目的步骤包括生成项目模板和安装依赖。
-
使用SWC进行TypeScript转译，通常比Babel更快。
-
安装Vitest及相关包以进行测试，并在package.json中添加测试脚本。
-
创建Vitest配置文件和测试设置文件以支持测试。
-
创建Hono后端项目并添加API端点以返回书籍数据。
-
为后端编写测试并确保API返回正确的JSON格式。
-
配置CORS以允许React开发环境的API请求。
-
提供将应用部署到Cloudflare Workers的步骤，包括如何处理静态资产。
-
修改构建输出目录以便将React和Hono一起部署。
-
建议准备小脚本以简化命令行操作。
-
介绍Hono的JSX中间件和HonoX作为结合React和Hono的其他选项。
延伸问答
如何使用Vite创建React项目？
使用命令$ pnpm create vite frontend --template react-swc-ts生成项目模板，然后进入frontend目录并安装依赖。
如何为Hono后端添加API端点？
在backend/src/index.ts中添加app.get('/api/v1/books', (c) => { return c.json([...]); });来返回书籍数据。
如何配置CORS以允许API请求？
在backend/src/index.ts中使用app.use('/api/*', cors({ origin: 'http://localhost:5173' }));来配置CORS。
如何在项目中使用Vitest进行测试？
安装Vitest及相关包，并在package.json中添加测试脚本，然后创建Vitest配置文件和测试设置文件。
如何将应用部署到Cloudflare Workers？
在backend/目录中运行命令pnpm run deploy即可将Hono应用部署到Cloudflare Workers。
如何将React和Hono一起部署？
修改frontend/package.json以将构建输出目录设置为backend/dist，然后在backend/wrangler.jsonc中添加assets设置。
