DEV Community ·

React + Hono项目的初始设置

💡 原文英文，约900词，阅读约需4分钟。

📝

内容提要

本文介绍了使用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的其他选项。

🔎

延伸解读

项目环境要求

在开始设置React和Hono项目之前，确保已安装Node.js和pnpm。这些工具是项目构建和依赖管理的基础，适用于macOS及其他现代shell环境。未满足这些要求可能导致后续步骤失败，因此建议提前检查环境配置。

测试环境配置

使用Vitest进行测试可以提高开发效率。文章中提到的配置步骤包括安装相关依赖和创建测试脚本。确保在package.json中添加测试命令，以便于后续的测试执行。良好的测试覆盖率有助于及时发现和修复潜在问题。

CORS配置的重要性

在开发过程中，配置CORS是确保前后端通信顺畅的关键步骤。文章中提到的CORS设置允许React应用访问Hono后端的API，避免因跨域请求而导致的错误。开发者应重视这一配置，以确保API请求能够正常进行。

部署到Cloudflare Workers

将应用部署到Cloudflare Workers时，需注意静态资产的处理。文章提供了将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设置。

🏷️