bntcloudcom/dify-web

Dify Frontend

Dify Frontend 是一个基于 Next.js 构建的前端项目，通过 https://github.com/vercel/next.js/tree/canary/packages/create-next-app 初始化，主要用于 Dify 平台的用户界面展示与交互。

镜像概述和主要用途

该项目是 Dify 平台的前端组件，提供用户交互界面，支持开发环境调试、生产环境部署，以及 UI 组件开发和代码质量保障。需配合 Dify 后端服务使用，适用于自托管场景下的平台搭建。

核心功能和特性

• 基于 Next.js：采用 Next.js 框架，支持服务端渲染和静态站点生成，优化性能和 SEO
• 多环境支持：可配置开发（DEVELOPMENT）和生产（PRODUCTION）环境
• 灵活部署：支持源码构建部署，可自定义端口、主机及 PM2 实例数量
• UI 组件开发：集成 Storybook，便于独立开发和测试 UI 组件
• 代码质量保障：提供 ESLint 配置和 Jest 单元测试支持

使用场景和适用范围

• Dify 平台自托管部署时的前端界面搭建
• Dify 前端功能二次开发和定制
• UI 组件独立开发与测试
• 开发环境下的功能调试和验证

使用方法和配置说明

环境要求

在运行前端服务前，需确保以下环境已准备就绪：

• Node.js >= v22.11.x
• pnpm v10.x

源码运行

安装依赖

bash
pnpm install

配置环境变量

创建 .env.local 文件并从 .env.example 复制配置模板：

bash
cp .env.example .env.local

修改 .env.local 中的环境变量值，主要配置项说明：

启动开发服务器

bash
pnpm run dev

通过浏览器访问 http://localhost:3000 查看结果。修改 app 目录下的文件会自动更新页面。

部署

服务器部署

1. 构建生产版本：

bash
pnpm run build

2. 启动服务器：

bash
pnpm run start

3. 自定义主机和端口：

bash
pnpm run start --port=3001 --host=0.0.0.0

4. 自定义 PM2 实例数量：在 docker-compose.yaml 或 Dockerfile 中配置 PM2_INSTANCES 参数。

Storybook UI 组件开发

本项目使用 Storybook 进行 UI 组件开发：

启动 Storybook 服务器：

bash
pnpm storybook

通过浏览器访问 http://localhost:6006 查看组件库。

代码检查

若使用 VSCode，将 web/.vscode/settings.example.json 重命名为 web/.vscode/settings.json 以应用代码检查配置。

单元测试

项目使用 Jest 和 React Testing Library 进行单元测试：

1. 在待测试文件旁创建 .spec 后缀的测试文件（如 util.ts 的测试文件为 util.spec.ts）

2. 运行测试：

bash
pnpm run test

测试示例参考：

• classnames.spec.ts
• index.spec.tsx

文档

完整文档请访问 <[***]>。

社区

Dify 社区可通过 *** 社区 加入，可在此提问、交流想法和分享项目。