mirror of
https://github.com/langgenius/dify.git
synced 2026-03-27 17:19:55 +08:00
cccff6768a
Made-with: Cursor # Conflicts: # api/README.md # api/controllers/console/app/workflow_draft_variable.py # api/core/agent/cot_agent_runner.py # api/core/agent/fc_agent_runner.py # api/core/app/apps/advanced_chat/app_runner.py # api/core/plugin/backwards_invocation/model.py # api/core/prompt/advanced_prompt_transform.py # api/core/workflow/nodes/base/node.py # api/core/workflow/nodes/llm/llm_utils.py # api/core/workflow/nodes/llm/node.py # api/core/workflow/nodes/parameter_extractor/parameter_extractor_node.py # api/core/workflow/nodes/question_classifier/question_classifier_node.py # api/core/workflow/runtime/graph_runtime_state.py # api/extensions/storage/base_storage.py # api/factories/variable_factory.py # api/pyproject.toml # api/services/variable_truncator.py # api/uv.lock # web/app/account/oauth/authorize/page.tsx # web/app/components/app/configuration/config-var/config-modal/field.tsx # web/app/components/base/alert.tsx # web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx # web/app/components/base/chat/chat/answer/more.tsx # web/app/components/base/chat/chat/answer/operation.tsx # web/app/components/base/chat/chat/answer/workflow-process.tsx # web/app/components/base/chat/chat/citation/index.tsx # web/app/components/base/chat/chat/citation/popup.tsx # web/app/components/base/chat/chat/citation/progress-tooltip.tsx # web/app/components/base/chat/chat/citation/tooltip.tsx # web/app/components/base/chat/chat/question.tsx # web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx # web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx # web/app/components/base/markdown-blocks/form.tsx # web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx # web/app/components/base/tag-management/panel.tsx # web/app/components/base/tag-management/trigger.tsx # web/app/components/header/account-setting/index.tsx # web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx # web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx # web/app/signin/utils/post-login-redirect.ts # web/eslint-suppressions.json # web/package.json # web/pnpm-lock.yaml
162 lines
4.2 KiB
Markdown
162 lines
4.2 KiB
Markdown
# 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]
|
|
|
|
First, install the dependencies:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
cp .env.example .env.local
|
|
```
|
|
|
|
> [!IMPORTANT]
|
|
>
|
|
> 1. 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.
|
|
> 1. 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 run dev
|
|
# or if you are using vinext which provides a better development experience
|
|
pnpm run dev:vinext
|
|
# (optional) start the dev proxy server so that you can use online API in development
|
|
pnpm run dev:proxy
|
|
```
|
|
|
|
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:
|
|
|
|
```bash
|
|
pnpm run build
|
|
```
|
|
|
|
Then, start the server:
|
|
|
|
```bash
|
|
pnpm run start
|
|
```
|
|
|
|
If you want to customize the host and port:
|
|
|
|
```bash
|
|
pnpm 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 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.
|
|
|
|
Then follow the [Lint Documentation] to lint the code.
|
|
|
|
## Test
|
|
|
|
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:
|
|
|
|
```bash
|
|
pnpm test
|
|
```
|
|
|
|
> [!NOTE]
|
|
> 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.
|
|
|
|
### Example Code
|
|
|
|
If you are not familiar with writing tests, refer to:
|
|
|
|
- [classnames.spec.ts] - Utility function test example
|
|
- [index.spec.tsx] - Component test example
|
|
|
|
### Analyze Component Complexity
|
|
|
|
Before writing tests, use the script to analyze component complexity:
|
|
|
|
```bash
|
|
pnpm analyze-component app/components/your-component/index.tsx
|
|
```
|
|
|
|
This will help you determine the testing strategy. See [web/testing/testing.md] for details.
|
|
|
|
## 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.
|
|
|
|
[Corepack]: https://github.com/nodejs/corepack#readme
|
|
[Discord community]: https://discord.gg/5AEfbxcd9k
|
|
[Lint Documentation]: ./docs/lint.md
|
|
[Next.js]: https://nextjs.org
|
|
[Node.js]: https://nodejs.org
|
|
[React Testing Library]: https://testing-library.com/docs/react-testing-library/intro
|
|
[Storybook]: https://storybook.js.org
|
|
[Vite+]: https://viteplus.dev
|
|
[Vitest]: https://vitest.dev
|
|
[classnames.spec.ts]: ./utils/classnames.spec.ts
|
|
[index.spec.tsx]: ./app/components/base/button/index.spec.tsx
|
|
[pnpm]: https://pnpm.io
|
|
[vinext]: https://github.com/cloudflare/vinext
|
|
[web/docs/test.md]: ./docs/test.md
|