This is a Next.js project, but you can dev with vinext.
Before starting the web frontend service, please make sure the following environment is ready.
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:
npm install -g corepack
corepack enableLearn more: Corepack
Run the following commands from the repository root.
First, install the dependencies:
pnpm installNote
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:
cp web/.env.example web/.env.localImportant
- 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:
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
pnpm -C web run dev:proxyOpen 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.
First, build the app for production:
pnpm -C web run buildThen, start the server:
pnpm -C web run startIf you build the Docker image manually, use the repository root as the build context:
docker build -f web/Dockerfile -t dify-web .If you want to customize the host and port:
pnpm -C web run start --port=3001 --host=0.0.0.0This project uses Storybook for UI component development.
To start the storybook server, run:
pnpm -C web storybookOpen http://localhost:6006 with your browser to see the result.
If your IDE is VSCode, rename web/.vscode/settings.example.json to web/.vscode/settings.json for lint code setting.
Then follow the Lint Documentation to lint the code.
We use Vitest and React Testing Library for Unit Testing.
📖 Complete Testing Guide: See web/docs/test.md for detailed testing specifications, best practices, and examples.
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:
pnpm -C web testNote
Our test is not fully stable yet, and we are actively working on improving it. If you encounter test failures only in CI but not locally, please feel free to ignore them and report the issue to us. You can try to re-run the test in CI, and it may pass successfully.
If you are not familiar with writing tests, refer to:
- classnames.spec.ts - Utility function test example
- index.spec.tsx - Component test example
Before writing tests, use the script to analyze component complexity:
pnpm analyze-component app/components/your-component/index.tsxThis will help you determine the testing strategy. See [web/testing/testing.md] for details.
Visit https://docs.dify.ai to view the full documentation.
The Dify community can be found on Discord community, where you can ask questions, voice ideas, and share your projects.