如何用 React Email CLI 配置 Resend 并上传模板到 Resend 协作编辑器【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email如果你的项目里已经有 React Email 模板.jsx或.tsx文件想让包括非技术人员在内的团队在 Resend 的可视化编辑器里实时协作需要做两件事先用 React Email CLI 把 Resend API Key 配置到本机再通过本地预览界面的 Resend 工具栏把模板上传到 Resend。仓库文档 Resend 集成说明 和 CLI 命令参考 描述了这条完整路径。本文适用于已在本地跑起来的 React Email 开发项目模板的“发送”属于另一个任务使用 Resend SDK不在本文范围内。前置条件本地 React Email 项目能跑起来CLI 的resend setup命令本身不依赖项目文件但上传模板这一步要求你先启动 React Email 本地预览服务。按照 自动安装指南npx create-emaillatest这会创建一个名为react-email-starter的文件夹里面带有若干示例邮件模板。进入项目目录后安装依赖并启动开发服务器npm install npm run dev浏览器访问http://localhost:3000看到模板列表、并能编辑emails目录下的文件实时看到变化说明本地环境就绪。如果你已经有现成的 React Email 项目直接从下一步开始即可。准备一个 Full Access 的 Resend API Key上传模板到 Resend 的前提是你在 Resend 有账号文档建议先注册免费 Resend 账号并且拿到一个作用域正确的 Key在 Resend dashboard 的 API Keys 页面点击Create API key确保该 Key 的作用域是Full Access。文档明确提示创建 Key 时要确认 scoped to Full AccessCLI 的输入提示也会再次提醒make sure it has Full Access。Key 的创建流程发生在 Resend 侧本文不展开重点是你最终要在终端里粘贴的是这一个re_开头的 Key。用 CLI 配置 Resend API Key在项目目录的终端中运行npx react-emaillatest resend setup这是交互式命令终端会提示你输入 API Key粘贴后按回车确认。按照 CLI 文档 的描述resend setup会把 Key 写入你用户主目录home directory下的配置而不是写进当前项目的文件里——也就是说配置一次后本机任意 React Email 项目都能复用。配置成功时CLI 会输出Resend integration successfully set up并提示随时可以用npx react-emaillatest resend reset移除该 Key该提示文案见 setup 命令实现。两个来自实现的行为细节遇到时不要误判如果本机已经配置过一个 Resend API Key再次运行resend setup会显示旧 Key 的前 11 位字符并提示“继续将替换它”continuing will replace it。这是正常流程继续输入即可覆盖旧 Key。Key 在主目录配置中是以简单加密方式存储的见 conf.ts源码注释明确说明这不是完全安全的保护因此不要把机器交给他人处理敏感邮件配置时忽略这一点。上传模板到 Resend 协作编辑器配置完成后启动本地预览服务项目目录内npm run dev打开http://localhost:3000。按照 Resend 集成文档在窗口底部的工具栏找到Resend标签页选择Upload上传单个模板或选择Bulk Upload批量导入将你的 React Email 模板导入 Resend。导入后团队即可在 Resend 的模板协作Templates界面中实时协作编辑这也是文档给这条集成的定位让不写代码的团队成员也能参与邮件制作。如果后续想移除本机与 Resend 的关联运行npx react-emaillatest resend reset该命令会从主目录配置中删除 API KeyCLI 文档 描述为Removes your API Key from the configuration in your home directory成功时输出Resend API Key successfully deleted见 reset 命令实现。与“发送邮件”的边界本文完成的目标是“配置 上传”即把模板放进 Resend 协作编辑器。而真正发送邮件走的是另一条路径安装resendSDK调用resend.emails.send并传入react属性由 Resend 负责把 React 模板转成 HTML参见 Resend 集成文档的发送部分 和仓库内的 Resend 发送示例。两者共用 Resend 账号但命令和依赖彼此独立上传模板不需要安装resend包resend setup也不会改动项目的package.json。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考