Environment:Langgenius Dify Node Frontend Environment
| Knowledge Sources | |
|---|---|
| Domains | Infrastructure, Frontend |
| Last Updated | 2026-02-12 08:00 GMT |
Overview
Node.js 24+ environment with Next.js 16.1, React 19.2, TypeScript 5.9, and pnpm 10.27 for the Dify frontend web application.
Description
This environment provides the runtime and build context for the Dify frontend. It is a Next.js 16 application using React 19 with TypeScript 5.9 strict mode. The build produces a standalone output for Docker deployment, served by PM2 in cluster mode (2 instances by default). Environment variables are validated at build time using @t3-oss/env-nextjs with Zod schemas. The application uses TanStack React Query for data fetching with typed oRPC contracts.
Usage
Use this environment for developing, building, and deploying the Dify web frontend. It is required for all frontend Implementation pages including the web Docker entrypoint, application UI components, and service layer hooks.
System Requirements
| Category | Requirement | Notes |
|---|---|---|
| OS | Linux, macOS, Windows | Alpine Linux in Docker images |
| Runtime | Node.js >= 24 | Specified in `.nvmrc` and `package.json` engines |
| Package Manager | pnpm 10.27.0 (exact) | Managed via Corepack; SHA-512 integrity checked |
| Build Memory | 4096 MB | `NODE_OPTIONS="--max-old-space-size=4096"` in Dockerfile |
| Disk | 1GB+ for node_modules | Additional for `.next` build output |
Dependencies
System Packages
- `node` >= 24
- `pnpm` = 10.27.0
- `corepack` (recommended for pnpm version management)
Core Framework
- `next` = 16.1.5
- `react` = 19.2.4
- `react-dom` = 19.2.4
- `typescript` = 5.9.3
UI Libraries
- `tailwindcss` = 3.4.19
- `reactflow` = 11.11.4 (workflow visualization)
- `lexical` = 0.38.2 (rich text editor)
- `mermaid` = 11.11.0 (diagram rendering)
- `katex` = 0.16.25 (LaTeX math rendering)
Data & Validation
- `@tanstack/react-query` = 5.90.5
- `zod` = 4.3.6
- `@t3-oss/env-nextjs` = 0.13.10 (env var validation)
- `zustand` (state management)
Build & Lint
- `eslint` (flat config with custom dify-i18n plugin)
- `vitest` (testing framework)
- `@testing-library/react` (component testing)
Credentials
The following environment variables are optional for the frontend:
- `NEXT_PUBLIC_GITHUB_ACCESS_TOKEN`: GitHub API token for plugin installation from GitHub.
- `NEXT_PUBLIC_SENTRY_DSN`: Sentry DSN for error tracking.
- `NEXT_PUBLIC_AMPLITUDE_API_KEY`: Amplitude analytics API key.
- `NEXT_PUBLIC_ZENDESK_WIDGET_KEY`: Zendesk support widget key.
Quick Install
# Enable Corepack for pnpm version management
corepack enable
# Install dependencies
cd web
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
Code Evidence
Node.js version requirement from `web/package.json:25-27`:
"engines": {
"node": ">=24"
}
pnpm version pinning from `web/package.json:6`:
"packageManager": "pnpm@10.27.0+sha512.72d699da16b1179c14ba..."
Environment variable validation with Zod from `web/env.ts:17-68`:
const clientSchema = {
NEXT_PUBLIC_ALLOW_EMBED: coercedBoolean.default(false),
NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME: coercedBoolean.default(false),
NEXT_PUBLIC_BATCH_CONCURRENCY: coercedNumber.default(5),
NEXT_PUBLIC_DEPLOY_ENV: z.enum(['DEVELOPMENT', 'PRODUCTION', 'TESTING']).optional(),
NEXT_PUBLIC_EDITION: z.enum(['SELF_HOSTED', 'CLOUD']).default('SELF_HOSTED'),
// ... all env vars validated at build time
}
Browser support list from `web/package.json:13-24`:
"browserslist": [
"last 1 Chrome version",
"last 1 Firefox version",
"last 1 Edge version",
"last 1 Safari version",
"iOS >=15",
"Android >= 10"
]
Common Errors
| Error Message | Cause | Solution |
|---|---|---|
| `ERR_PNPM_UNSUPPORTED_ENGINE` | Node.js version < 24 | Install Node.js 24+ via nvm: `nvm install 24` |
| `Corepack is not enabled` | pnpm version mismatch | Run `corepack enable` before `pnpm install` |
| `NEXT_PUBLIC_API_PREFIX is not set` | Missing backend API URL | Set `NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api` in `.env.local` |
| Build OOM (`JavaScript heap out of memory`) | Insufficient build memory | Set `NODE_OPTIONS="--max-old-space-size=4096"` |
Compatibility Notes
- Browser Support: Last 1 version of Chrome, Firefox, Edge, Safari. Mobile: iOS >= 15, Android >= 10.
- Self-Hosted vs Cloud: `NEXT_PUBLIC_EDITION` controls feature visibility. Cloud edition enables billing, marketplace integration.
- Cookie Domain: When frontend and backend run on different subdomains, set `NEXT_PUBLIC_COOKIE_DOMAIN` to the shared top-level domain for authentication cookie sharing.
- PM2 Cluster Mode: Docker production deployment uses PM2 with 2 instances by default. Configurable via `PM2_INSTANCES` env var.