HeyForm开源表单构建器的自建到上线路径【免费下载链接】heyformOpen-Source Form Builder项目地址: https://gitcode.com/GitHub_Trending/he/heyformHeyForm 是开源表单构建器把对话式表单的搭建、换装、嵌入与提交分析做进一套 React 工程。你无需拼凑多个工具从画布拖出第一张表单就能一路跑到对外服务。 看懂 HeyForm 的分层架构仓库是 pnpm 单仓多包按职责切成几个可独立发包的单元。packages/webapp 是管理后台你在这里拖字段、改主题、看提交。packages/server 是 NestJS 服务管账号、表单、提交与队列。packages/form-renderer 是渲染库把同一套字段画到任意页面。packages/embed 是嵌入脚本packages/answer-utils 与 shared-types-enums 是前后端共享的校验逻辑和类型定义。数据落在 MongoDB队列与缓存走 Redis。 场景一在画布上搭建对话式表单你打开构建器左边是题目列表中间是实时预览右边是字段设置。拖一个全名进去它自动拆成名和姓两栏。需要跳转时你去 Logic 页给某道题加条件。答错就走另一条分支。字段类型很多文本、邮箱、电话、单选、评分、日期都有。文件上传也支持。前后端共用一套校验逻辑。你浏览器里看到的规则和服务端拦截的完全一致。下面列出的是这套共享逻辑的入口文件它把校验、条件展开和字段压平都收口在一处export * from ./validate export * from ./apply-logic-to-fields export * from ./validate-condition export * from ./flatten-fields export * from ./answer-to-json提交时后端就用它们校验答案、展开隐藏字段、套用条件答错的分支当场被拦下。源码见 packages/answer-utils/src/ 与 packages/form-renderer/src/blocks/。 场景二为表单换装并嵌入自己的站点表单做好后先让它长得像你。你在 Design 页换字体、主色和背景。也能写自定义 CSS把品牌感拉满。要放进自己的网站HeyForm 给了一段嵌入脚本。你用>div>app.useGlobalFilters(new AllExceptionsFilter()) app.use(helmet({ frameguard: false, contentSecurityPolicy: false })) app.use(rateLimit({ windowMs: ms(1m), max: 1000 })) app.use(/api/upload, rateLimit({ windowMs: ms(1m), max: 30 })) await app.listen(APP_LISTEN_PORT, APP_LISTEN_HOSTNAME)启动后超出配额的请求会被直接限流上传接口尤其严格。源码见 packages/server/src/main.ts。 从克隆到本地启动安装与运行想自己跑一份先准备 Node 20 以上和 pnpm 8 以上。仓库根目录的 engines 字段写死了这条底线。接着配置环境变量至少给 MONGO_URI、REDIS_HOST 和 SESSION_KEY。服务端从这些变量读取数据库与缓存连接。缺了会在启动时报错。装完依赖后用一条命令同时起前后端。下面这条命令从克隆到本地启动一气呵成git clone https://gitcode.com/GitHub_Trending/he/heyform cd heyform pnpm install pnpm dev终端应出现 NestJS 打印的 Server is running on http://0.0.0.0:9157。还会看到 Vite 的本地地址说明前后端都已就绪。✅ 上线前逐条核对生产落地清单检查项为什么重要怎么验证Node 与 pnpm 版本仓库 engines 要求 Node20、pnpm8低版本装不上运行 node -v 与 pnpm -v 核对MONGO_URI、REDIS_HOST、SESSION_KEY服务端连库与缓存都靠它们缺项启动即失败检查 .env再看启动日志有无连接错误端口与静态资源默认监听 9157前端产物交给服务端托管打开 http://localhost:9157 看能否访问上传与限流配置上传走 /static/upload限流护栏防刷用超限请求压测上传接口确认被限流授权合规项目为 AGPL-3.0二次分发需遵循条款对照 docs/ 内 license 说明评估 延伸阅读深入源码的入口packages/server/src/resolver/ —— 表单、项目、提交等 GraphQL 接口入口适合后端开发者。packages/webapp/src/pages/form/ —— 构建器各题型的 React 实现适合前端同学。packages/embed/example/index.html —— 嵌入脚本四种形态的示例适合做集成的人。docs/invite-only-registration.md —— 邀请制注册的设计说明适合准备自建多租户的团队。Dockerfile —— 容器化部署的定义适合走 CI/CD 上线的人。【免费下载链接】heyformOpen-Source Form Builder项目地址: https://gitcode.com/GitHub_Trending/he/heyform创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考