dify/web

Dify Frontend

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

Getting Started

Run by source code

To start the web frontend service, you will need Node.js v18.x (LTS) and NPM version 8.x.x or Yarn.

First, install the dependencies:

npm install
# or
yarn install --frozen-lockfile

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
# 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:

npm run dev
# or
yarn 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.

Deploy

Deploy on server

First, build the app for production:

npm run build

Then, start the server:

npm run start

If you want to customize the host and port:

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

Storybook

This project uses Storybook for UI component development.

To start the storybook server, run:

yarn storybook

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

Lint Code

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

Test

We start to use Jest and React Testing Library for Unit Testing.

You can create a test file with a suffix of .spec beside the file that to be tested. For example, if you want to test a file named util.ts. The test file name should be util.spec.ts.

Run test:

npm run test

If you are not familiar with writing tests, here is some code to refer to:

• classnames.spec.ts
• index.spec.tsx

Documentation

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