7c97ea4a9e
- Add ENTRY_NODE_WRAPPER_OFFSET constant (x: 0, y: 21) for Start/Trigger nodes - Implement getNodeAlignPosition() to calculate actual inner node positions - Fix horizontal/vertical helpline rendering to account for wrapper offset - Fix snap-to-align logic to properly align inner nodes instead of wrapper - Correct helpline width/height calculation by subtracting offset for entry nodes - Ensure backward compatibility: only affects Start/Trigger nodes with EntryNodeContainer wrapper This fix ensures that Start and Trigger nodes (which have an EntryNodeContainer wrapper with status indicator) align based on their inner node boundaries rather than the wrapper boundaries, matching the alignment behavior of regular nodes. |
||
|---|---|---|
| .. | ||
| .husky | ||
| .storybook | ||
| .vscode | ||
| __mocks__ | ||
| __tests__ | ||
| app | ||
| assets | ||
| bin | ||
| config | ||
| context | ||
| docker | ||
| hooks | ||
| i18n | ||
| i18n-config | ||
| models | ||
| public | ||
| scripts | ||
| service | ||
| themes | ||
| types | ||
| utils | ||
| .dockerignore | ||
| .env.example | ||
| .gitignore | ||
| .oxlintrc.json | ||
| Dockerfile | ||
| README.md | ||
| eslint.config.mjs | ||
| global.d.ts | ||
| jest.config.ts | ||
| jest.setup.ts | ||
| middleware.ts | ||
| next.config.js | ||
| package.json | ||
| pnpm-lock.yaml | ||
| postcss.config.js | ||
| tailwind-common-config.ts | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| typography.js | ||
README.md
Dify Frontend
This is a Next.js project bootstrapped with create-next-app.
Getting Started
Run by source code
Before starting the web frontend service, please make sure the following environment is ready.
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
# 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.
Deploy
Deploy on server
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.
Storybook
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.
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:
pnpm run test
If you are not familiar with writing tests, here is some code to refer to:
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.