mirror of
https://github.com/lobehub/lobehub
synced 2026-04-21 17:47:27 +00:00
338df4baf9
* update e2e test * 📝 docs: Update src directory structure to be more comprehensive - Add missing directories: business, const, envs, helpers, tools - Add missing root files: auth.ts, instrumentation.ts, instrumentation.node.ts, proxy.ts - Update descriptions to be more accurate - Sync changes across English and Chinese documentation Fixes #9521
115 lines
5.7 KiB
Text
115 lines
5.7 KiB
Text
---
|
|
title: Directory Structure
|
|
description: >-
|
|
Explore the organized directory structure of LobeHub, including app,
|
|
components, and services.
|
|
tags:
|
|
- LobeHub
|
|
- Directory Structure
|
|
- Next.js
|
|
- App Router
|
|
- API Architecture
|
|
---
|
|
|
|
# Directory Structure
|
|
|
|
The directory structure of LobeHub is as follows:
|
|
|
|
```bash
|
|
src
|
|
├── app # Next.js App Router implementation with route groups and API routes
|
|
├── business # Business logic modules (client and server)
|
|
├── components # Reusable UI components
|
|
├── config # Application configuration files, including client-side and server-side environment variables
|
|
├── const # Application constants and enums
|
|
├── envs # Environment variable definitions and validation (analytics, auth, llm, etc.)
|
|
├── features # Function modules related to business functions, such as agent settings, plugin development pop-ups, etc.
|
|
├── helpers # Utility helpers for tool engineering, placeholder parsing, etc.
|
|
├── hooks # Custom utility hooks reused throughout the application
|
|
├── layout # Application layout components, such as navigation bars, sidebars, etc.
|
|
├── libs # Third-party integrations (analytics, OIDC, etc.)
|
|
├── locales # Internationalization language files
|
|
├── server # Server-side modules and services
|
|
├── services # Encapsulated backend service interfaces, such as HTTP requests
|
|
├── store # Zustand store for state management
|
|
├── styles # Global styles and CSS-in-JS configurations
|
|
├── tools # Built-in tools (artifacts, inspectors, interventions, etc.)
|
|
├── types # TypeScript type definition files
|
|
├── utils # Common utility functions
|
|
├── auth.ts # Authentication configuration (Better Auth)
|
|
├── instrumentation.ts # Application monitoring and telemetry setup
|
|
├── instrumentation.node.ts # Node.js-specific instrumentation
|
|
└── proxy.ts # Next.js middleware proxy configuration
|
|
```
|
|
|
|
## app
|
|
|
|
The `app` directory follows Next.js 13+ App Router conventions with a sophisticated architecture using [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) to organize backend services, platform variants, and application routes:
|
|
|
|
```bash
|
|
app
|
|
├── (backend)/ # Backend API routes and services
|
|
│ ├── api/ # REST API endpoints
|
|
│ │ ├── auth/ # Authentication routes
|
|
│ │ └── webhooks/ # Webhook handlers
|
|
│ ├── middleware/ # Request middleware
|
|
│ ├── oidc/ # OpenID Connect routes
|
|
│ ├── trpc/ # tRPC API endpoints
|
|
│ │ ├── async/ # Async tRPC routes
|
|
│ │ ├── desktop/ # Desktop-specific tRPC routes
|
|
│ │ ├── edge/ # Edge runtime tRPC routes
|
|
│ │ ├── lambda/ # Lambda tRPC routes
|
|
│ │ └── tools/ # Tools tRPC routes
|
|
│ └── webapi/ # Web API endpoints
|
|
│ ├── chat/ # Chat-related APIs
|
|
│ ├── models/ # Model management APIs
|
|
│ ├── tts/ # Text-to-speech APIs
|
|
│ └── ...
|
|
├── [variants]/ # Platform and device variants
|
|
│ ├── (auth)/ # Authentication pages
|
|
│ │ ├── login/
|
|
│ │ └── signup/
|
|
│ ├── (main)/ # Main application routes
|
|
│ │ ├── (mobile)/ # Mobile-specific routes
|
|
│ │ │ └── me/ # Mobile profile pages
|
|
│ │ ├── _layout/ # Layout components
|
|
│ │ ├── chat/ # Chat interface
|
|
│ │ ├── discover/ # Discovery pages
|
|
│ │ ├── files/ # File management
|
|
│ │ ├── image/ # Image generation
|
|
│ │ ├── profile/ # User profile
|
|
│ │ ├── repos/ # Repository management
|
|
│ │ └── settings/ # Application settings
|
|
│ └── @modal/ # Parallel modal routes
|
|
│ ├── (.)changelog/
|
|
│ └── _layout/
|
|
├── desktop/ # Desktop-specific routes
|
|
│ └── devtools/
|
|
├── manifest.ts # PWA manifest
|
|
├── robots.tsx # Robots.txt generation
|
|
├── sitemap.tsx # Sitemap generation
|
|
└── sw.ts # Service worker
|
|
```
|
|
|
|
### Architecture Explanation
|
|
|
|
**Route Groups:**
|
|
|
|
- `(backend)` - Contains all server-side API routes, middleware, and backend services
|
|
- `[variants]` - Dynamic route group handling different platform variants and main application pages
|
|
- `@modal` - Parallel routes for modal dialogs using Next.js parallel routing
|
|
|
|
**Platform Organization:**
|
|
|
|
- The architecture supports multiple platforms (web, desktop, mobile) through route organization
|
|
- Desktop-specific routes are in the `desktop/` directory
|
|
- Mobile-specific routes are organized under `(main)/(mobile)/`
|
|
- Shared layouts and components are in `_layout/` directories
|
|
|
|
**API Architecture:**
|
|
|
|
- REST APIs in `(backend)/api/` and `(backend)/webapi/`
|
|
- tRPC endpoints organized by runtime environment (edge, lambda, async, desktop)
|
|
- Authentication and OIDC handling in dedicated route groups
|
|
|
|
This architecture provides clear separation of concerns while maintaining flexibility for different deployment targets and runtime environments.
|