Implementation:Langgenius Dify Frontend Package

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Build_System, Dependencies
Last Updated	2026-02-08 00:00 GMT

Overview

The npm package manifest for the Dify frontend application, defining its metadata, scripts, dependencies, and build configuration.

Description

web/package.json is the central package manifest for the Dify frontend, a Next.js 16 application built with React 19 and TypeScript. The package is named dify-web (version 1.12.1) and is marked as private to prevent accidental publication to npm. It specifies pnpm@10.27.0 as the required package manager and requires Node.js >= 24.

The file defines:

• Scripts: Development (dev, dev:inspect), build (build, build:docker), linting (lint, lint:fix, lint:ci, lint:quiet, lint:complexity), type checking (type-check, type-check:tsgo), testing (test, test:coverage, test:ci, test:watch), code generation (gen-icons, gen-doc-paths), and analysis tools (analyze, knip, storybook).
• Dependencies: Key runtime libraries include Next.js 16, React 19, Zustand/Jotai for state management, i18next for internationalization, Lexical for rich text editing, ReactFlow for workflow visualization, ECharts for charting, Mermaid for diagrams, and Zod for schema validation.
• Dev dependencies: ESLint with multiple plugins, Vitest for testing, Storybook for component development, Tailwind CSS, TypeScript 5.9, and Husky for git hooks.
• pnpm overrides: A set of dependency overrides using @nolyfill packages to replace polyfills with lightweight stubs, along with security-related version pins for packages like prismjs, pbkdf2, and esbuild.
• Browser support: Targets the last version of Chrome, Firefox, Edge, Safari, along with iOS >= 15 and Android >= 10.
• Import maps: Configures the #i18n import alias to resolve to different modules depending on whether the code runs on the React server or client.
• lint-staged: Runs eslint --fix on all staged files via Husky pre-commit hooks.

Usage

Developers interact with this file when adding or updating dependencies (pnpm add/pnpm update), modifying build scripts, or adjusting build configuration. The file is consumed by pnpm during pnpm install and by Next.js and other tools during development and build processes.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/package.json
• Lines: 1-302

Structure

The file follows the standard npm package.json schema with additional pnpm-specific fields.

{
  "name": "dify-web",
  "type": "module",
  "version": "1.12.1",
  "private": true,
  "packageManager": "pnpm@10.27.0+sha512...",
  "imports": {
    "#i18n": {
      "react-server": "./i18n-config/lib.server.ts",
      "default": "./i18n-config/lib.client.ts"
    }
  },
  "browserslist": ["last 1 Chrome version", "..."],
  "engines": { "node": ">=24" },
  "scripts": { "dev": "next dev", "build": "next build", "..." : "..." },
  "dependencies": { "next": "16.1.5", "react": "19.2.4", "..." : "..." },
  "devDependencies": { "eslint": "9.39.2", "vitest": "4.0.17", "..." : "..." },
  "pnpm": {
    "overrides": { "...": "..." },
    "ignoredBuiltDependencies": ["canvas", "core-js-pure"],
    "onlyBuiltDependencies": ["@parcel/watcher", "esbuild", "sharp"]
  },
  "resolutions": { "...": "..." },
  "lint-staged": { "*": "eslint --fix" }
}

I/O Contract

Inputs

Name	Type	Required	Description
dependencies	object	Yes	Map of runtime package names to version specifiers
devDependencies	object	Yes	Map of development-only package names to version specifiers
scripts	object	Yes	Map of script names to shell commands
engines	object	Yes	Node.js version constraint
pnpm.overrides	object	No	Dependency version overrides applied by pnpm

Outputs

Name	Type	Description
Dependency graph	node_modules	Installed packages resolved by pnpm based on listed dependencies
Script commands	shell	Executable commands available via pnpm run <script>
Build artifacts	.next/	Next.js build output produced by the build script

Usage Examples

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run linting with auto-fix
pnpm lint:fix

# Run tests with coverage
pnpm test:coverage

# Build for production Docker deployment
pnpm build:docker

# Type-check with tsgo
pnpm type-check:tsgo

Related Pages

• Environment:Langgenius_Dify_Node_Frontend_Environment