ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

HeyForm 开源表单构建器上手指南

HeyForm 开源表单构建器上手指南 HeyForm 开源表单构建器上手指南【免费下载链接】heyformOpen-Source Form Builder项目地址: https://gitcode.com/GitHub_Trending/he/heyform自己搭表单收集功能每次都要手写字段校验、条件跳转、主题样式和 CSV 导出改一处字段结构渲染层、校验层、导出层得跟着改三遍没有防刷机制时表单页很快会变成垃圾数据的收件箱。HeyForm 是一个可自托管的开源表单构建器Form Builder。先带你在本地把最小服务跑起来再逐个拆解五个核心能力。项目全景HeyForm 是一个 monorepo多包单仓由 7 个包组成server 是 NestJS GraphQL 后端webapp 是 React Vite 前端form-renderer 是独立渲染库。架构思想是把「表单定义」和「表单渲染」解耦同一份 schema 被编辑器预览、公开表单页和第三方网站嵌入三处复用只换外壳。它面向的是想给自己的产品自建表单构建器的开发者而不是依赖 SaaS 的团队。 上手路径环境上你需要 Node ≥ 20 和 pnpm ≥ 8后端还要 MongoDB 与 RedisKeyDB 兼容仓库自带 docker-compose.test.yml一条命令能拉起 Mongo 4.4 和 KeyDB顺带处理了上传目录的卷挂载。安装命令负责克隆仓库并安装 workspace 依赖注意 postinstall 会自动挂上 pre-commit 钩子git clone https://gitcode.com/GitHub_Trending/he/heyform cd heyform pnpm install服务端启动前要把必填环境变量写进 .env其中 SESSION_KEY 与 FORM_ENCRYPTION_KEY 是启动硬依赖其余项可对照 docker-compose.test.yml 里的默认值SESSION_KEYyour-session-key FORM_ENCRYPTION_KEYyour-encryption-key MONGO_URImongodb://127.0.0.1:27017/heyform REDIS_HOST127.0.0.1 REDIS_PORT6379运行入口是根目录一条pnpm dev它会并发启动 webapp 与 server服务端默认监听 9157 端口访问 /health/ready 确认就绪想直接体验 Docker 部署形态改用docker compose -f docker-compose.test.yml up构建即可。 核心能力拆解这五个能力都是 monorepo 内的独立模块无需额外安装依赖每一块都能在下文指到具体源码目录。多表单嵌入一个 div 挂进任意页面嵌入组件——不改宿主页代码四种方式挂表单embed 包扫描页面上所有带 contenteditable="false">【免费下载链接】heyformOpen-Source Form Builder项目地址: https://gitcode.com/GitHub_Trending/he/heyform创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表