This is a Next.js project bootstrapped with create-next-app.

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

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

First, install the dependencies:

pnpm install

Then, configure the environment variables. Create a file named .env.local in the current directory and copy the contents from .env.example. Modify the values of these environment variables according to your requirements:

cp .env.example .env.local

# For production release, change this to PRODUCTION NEXT_PUBLIC_DEPLOY_ENV=DEVELOPMENT # The deployment edition, SELF_HOSTED NEXT_PUBLIC_EDITION=SELF_HOSTED # The base URL of console application, refers to the Console base URL of WEB service if console domain is # different from api or web app domain. # example: http://cloud.dify.ai/console/api NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api NEXT_PUBLIC_COOKIE_DOMAIN= # The URL for Web APP, refers to the Web App base URL of WEB service if web app domain is different from # console or api domain. # example: http://udify.app/api NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api # SENTRY NEXT_PUBLIC_SENTRY_DSN= 

Finally, run the development server:

pnpm run dev

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

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

First, build the app for production:

pnpm run build

Then, start the server:

pnpm run start

If you want to customize the host and port:

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

If you want to customize the number of instances launched by PM2, you can configure PM2_INSTANCES in docker-compose.yaml or Dockerfile.

This project uses Storybook for UI component development.

To start the storybook server, run:

pnpm storybook

Open 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.

We use Vitest and React Testing Library for Unit Testing.

📖 Complete Testing Guide: See web/testing/testing.md for detailed testing specifications, best practices, and examples.

Run test:

pnpm test

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.tsx

This will help you determine the testing strategy. See web/testing/testing.md for details.

Visit https://docs.dify.ai/getting-started/readme 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.