mirror of
https://github.com/bytedance/deer-flow.git
synced 2026-04-25 11:18:22 +00:00
c6b0423558
* feat(frontend): add Playwright E2E tests with CI workflow
Add end-to-end testing infrastructure using Playwright (Chromium only).
14 tests across 5 spec files cover landing page, chat workspace,
thread history, sidebar navigation, and agent chat — all with mocked
LangGraph/Backend APIs via network interception (zero backend dependency).
New files:
- playwright.config.ts — Chromium, 30s timeout, auto-start Next.js
- tests/e2e/utils/mock-api.ts — shared API mocks & SSE stream helpers
- tests/e2e/{landing,chat,thread-history,sidebar,agent-chat}.spec.ts
- .github/workflows/e2e-tests.yml — push main + PR trigger, paths filter
Updated: package.json, Makefile, .gitignore, CONTRIBUTING.md,
frontend/CLAUDE.md, frontend/AGENTS.md, frontend/README.md
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix: apply Copilot suggestions
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
153 lines
4.9 KiB
Markdown
153 lines
4.9 KiB
Markdown
# DeerFlow Frontend
|
|
|
|
Like the original DeerFlow 1.0, we would love to give the community a minimalistic and easy-to-use web interface with a more modern and flexible architecture.
|
|
|
|
## Tech Stack
|
|
|
|
- **Framework**: [Next.js 16](https://nextjs.org/) with [App Router](https://nextjs.org/docs/app)
|
|
- **UI**: [React 19](https://react.dev/), [Tailwind CSS 4](https://tailwindcss.com/), [Shadcn UI](https://ui.shadcn.com/), [MagicUI](https://magicui.design/) and [React Bits](https://reactbits.dev/)
|
|
- **AI Integration**: [LangGraph SDK](https://www.npmjs.com/package/@langchain/langgraph-sdk) and [Vercel AI Elements](https://vercel.com/ai-sdk/ai-elements)
|
|
|
|
## Quick Start
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 22+
|
|
- pnpm 10.26.2+
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
# Install dependencies
|
|
pnpm install
|
|
|
|
# Copy environment variables
|
|
cp .env.example .env
|
|
# Edit .env with your configuration
|
|
```
|
|
|
|
### Development
|
|
|
|
```bash
|
|
# Start development server
|
|
pnpm dev
|
|
|
|
# The app will be available at http://localhost:3000
|
|
```
|
|
|
|
### Build & Test
|
|
|
|
```bash
|
|
# Type check
|
|
pnpm typecheck
|
|
|
|
# Check formatting
|
|
pnpm format
|
|
|
|
# Apply formatting
|
|
pnpm format:write
|
|
|
|
# Lint
|
|
pnpm lint
|
|
|
|
# Run unit tests
|
|
pnpm test
|
|
|
|
# One-time setup: install Playwright Chromium browser
|
|
pnpm exec playwright install chromium
|
|
|
|
# Run E2E tests (builds and starts production server automatically)
|
|
pnpm test:e2e
|
|
|
|
# Build for production
|
|
pnpm build
|
|
|
|
# Start production server
|
|
pnpm start
|
|
```
|
|
|
|
## Site Map
|
|
|
|
```
|
|
├── / # Landing page
|
|
├── /chats # Chat list
|
|
├── /chats/new # New chat page
|
|
└── /chats/[thread_id] # A specific chat page
|
|
```
|
|
|
|
## Configuration
|
|
|
|
### Environment Variables
|
|
|
|
Key environment variables (see `.env.example` for full list):
|
|
|
|
```bash
|
|
# Backend API URLs (optional, uses nginx proxy by default)
|
|
NEXT_PUBLIC_BACKEND_BASE_URL="http://localhost:8001"
|
|
# LangGraph API URLs (optional, uses nginx proxy by default)
|
|
NEXT_PUBLIC_LANGGRAPH_BASE_URL="http://localhost:2024"
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
tests/
|
|
├── e2e/ # E2E tests (Playwright, Chromium, mocked backend)
|
|
└── unit/ # Unit tests (mirrors src/ layout)
|
|
src/
|
|
├── app/ # Next.js App Router pages
|
|
│ ├── api/ # API routes
|
|
│ ├── workspace/ # Main workspace pages
|
|
│ └── mock/ # Mock/demo pages
|
|
├── components/ # React components
|
|
│ ├── ui/ # Reusable UI components
|
|
│ ├── workspace/ # Workspace-specific components
|
|
│ ├── landing/ # Landing page components
|
|
│ └── ai-elements/ # AI-related UI elements
|
|
├── core/ # Core business logic
|
|
│ ├── api/ # API client & data fetching
|
|
│ ├── artifacts/ # Artifact management
|
|
│ ├── config/ # App configuration
|
|
│ ├── i18n/ # Internationalization
|
|
│ ├── mcp/ # MCP integration
|
|
│ ├── messages/ # Message handling
|
|
│ ├── models/ # Data models & types
|
|
│ ├── settings/ # User settings
|
|
│ ├── skills/ # Skills system
|
|
│ ├── threads/ # Thread management
|
|
│ ├── todos/ # Todo system
|
|
│ └── utils/ # Utility functions
|
|
├── hooks/ # Custom React hooks
|
|
├── lib/ # Shared libraries & utilities
|
|
├── server/ # Server-side code
|
|
│ └── better-auth/ # Authentication setup and session helpers
|
|
└── styles/ # Global styles
|
|
```
|
|
|
|
## Scripts
|
|
|
|
| Command | Description |
|
|
| ------------------- | --------------------------------------- |
|
|
| `pnpm dev` | Start development server with Turbopack |
|
|
| `pnpm build` | Build for production |
|
|
| `pnpm start` | Start production server |
|
|
| `pnpm test` | Run unit tests with Vitest |
|
|
| `pnpm test:e2e` | Run E2E tests with Playwright |
|
|
| `pnpm format` | Check formatting with Prettier |
|
|
| `pnpm format:write` | Apply formatting with Prettier |
|
|
| `pnpm lint` | Run ESLint |
|
|
| `pnpm lint:fix` | Fix ESLint issues |
|
|
| `pnpm typecheck` | Run TypeScript type checking |
|
|
| `pnpm check` | Run both lint and typecheck |
|
|
|
|
## Development Notes
|
|
|
|
- Uses pnpm workspaces (see `packageManager` in package.json)
|
|
- Turbopack enabled by default in development for faster builds
|
|
- Environment validation can be skipped with `SKIP_ENV_VALIDATION=1` (useful for Docker)
|
|
- Backend API URLs are optional; nginx proxy is used by default in development
|
|
|
|
## License
|
|
|
|
MIT License. See [LICENSE](../LICENSE) for details.
|