Dify Frontend

This is a Next.js project, but you can dev with vinext.

Getting Started

Run by source code

Before starting the web frontend service, please make sure the following environment is ready.

Node.js
pnpm

You can also use Vite+ with the corresponding vp commands. For example, use vp install instead of pnpm install and vp test instead of pnpm run test.

[!TIP] It is recommended to install and enable Corepack to manage package manager versions automatically:
bash
npm install -g corepack
corepack enable
Learn more: Corepack

Run the following commands from the repository root.

First, install the dependencies:

bash

pnpm install

[!NOTE] JavaScript dependencies are managed by the workspace files at the repository root: package.json, pnpm-lock.yaml, pnpm-workspace.yaml, and .nvmrc. Install dependencies from the repository root, then run frontend scripts from web/.

Then, configure the environment variables. Create web/.env.local and copy the contents from web/.env.example. Modify the values of these environment variables according to your requirements:

bash

cp web/.env.example web/.env.local

[!IMPORTANT]

When the frontend and backend run on different subdomains, set NEXT_PUBLIC_COOKIE_DOMAIN=1. The frontend and backend must be under the same top-level domain in order to share authentication cookies.

It's necessary to set NEXT_PUBLIC_API_PREFIX and NEXT_PUBLIC_PUBLIC_API_PREFIX to the correct backend API URL.

Finally, run the development server:

bash

pnpm -C web run dev
# or if you are using vinext which provides a better development experience
pnpm -C web run dev:vinext
# (optional) start the dev proxy server so that you can use online API in development
# edit web/dev-proxy.config.ts to choose proxy paths
# edit web/.env.local to override DEV_PROXY_TARGET, DEV_PROXY_ENTERPRISE_TARGET, DEV_PROXY_HOST, or DEV_PROXY_PORT
pnpm -C web run dev:proxy

Open http://localhost:3000 with your browser to see the result.

You can start editing the files under web/app. The page auto-updates as you edit the file.

Deploy

Deploy on server

First, build the app for production:

bash

pnpm -C web run build

Then, start the server:

bash

pnpm -C web run start

If you build the Docker image manually, use the repository root as the build context:

bash

docker build -f web/Dockerfile -t dify-web .

If you want to customize the host and port:

bash

pnpm -C web run start --port=3001 --host=0.0.0.0

Storybook

This project uses Storybook for UI component development.

To start the storybook server, run:

bash

pnpm -C web storybook

Open http://localhost:6006 with your browser to see the result.

Lint Code

If your IDE is VSCode, rename .vscode/settings.example.json to .vscode/settings.json for lint code setting.

Then follow the Lint Documentation to lint the code.

Test

We use Vitest and React Testing Library for Unit Testing.

📖 Frontend Testing Guide: See web/docs/test.md for the canonical testing policy and workflow.

[!IMPORTANT] As we are using Vite+, the vitest command is not available. Please make sure to run tests with vp commands. For example, use npx vp test instead of npx vitest.

Run test:

bash

cd web
vp test run

If a test fails only in CI, inspect the failing job and reproduce it locally when possible. A rerun can help identify a flaky test, but it does not replace diagnosing or reporting the failure.

Example Code

If you are not familiar with writing tests, refer to:

index.spec.tsx - Component test example

Documentation

Visit https://docs.dify.ai to view the full documentation.

Community

The Dify community can be found on Discord community, where you can ask questions, voice ideas, and share your projects.