coze源码解读：项目启动

coze源码解读第一篇，主要介绍项目是如何启动的，以及coze studio前端index.tsx的一些基本逻辑。

启动服务

Bash 复制代码

# 启动服务
cd docker
cp .env.example .env
docker compose up -d

前端目录

bash 复制代码

frontend/
├── apps/                    # 应用层
│   └── coze-studio/        # 主应用
│       ├── src/            # 源代码
│       │   ├── app.tsx     # 应用入口
│       │   ├── layout.tsx  # 布局组件
│       │   ├── pages/      # 页面组件
│       │   └── routes/     # 路由配置
│       ├── assets/         # 静态资源
│       ├── config/         # 项目配置
│       └── package.json    # 依赖配置
│
├── packages/               # 核心包
│   ├── agent-ide/         # AI Agent 开发环境
│   ├── arch/              # 架构基础设施
│   ├── common/            # 通用组件和工具
│   ├── components/        # UI组件库
│   ├── data/              # 数据层
│   ├── devops/            # DevOps工具
│   ├── foundation/        # 基础设施
│   ├── project-ide/       # 项目开发环境
│   ├── studio/            # Studio核心功能
│   ├── workflow/          # 工作流引擎
│   └── community/         # 社区功能
│
├── config/                # 配置层
│   ├── eslint-config/     # ESLint配置
│   ├── rsbuild-config/    # Rsbuild构建配置
│   ├── ts-config/         # TypeScript配置
│   ├── postcss-config/    # PostCSS配置
│   ├── stylelint-config/  # Stylelint配置
│   ├── tailwind-config/   # Tailwind CSS配置
│   └── vitest-config/     # Vitest测试配置
│
├── infra/                 # 基础设施
│   ├── idl/              # 接口定义语言工具
│   ├── plugins/          # 构建插件
│   ├── utils/            # 工具库
│   └── eslint-plugin/    # 自定义ESLint插件
│
└── scripts/              # 脚本工具
    ├── block-unresolved-conflict.sh
    ├── post-rush-install.sh
    └── pre-push-hook.sh

前端启动脚本

bash 复制代码

cd frontend
rush install

cd apps/coze-studio

npm run dev

app 启动

index.tsx

加载功能配置文件

加载流程全局上下文 window.fg_values ->fetchFeatureGating->window.fetch_fg_promise->localStorage $'cache:@coze-arch/bot-flags'$ 的流程去获取。应该是项目内部的一套处理功能灰度的方法，不太重要。

typescript 复制代码

initFlags();

加载国际化文件

typescript 复制代码

initI18nInstance({
  lng: (localStorage.getItem('i18next') ?? (IS_OVERSEA ? 'en' : 'zh-CN')) as
    | 'en'
    | 'zh-CN',
});

具体的配置文件在 frontend/packages/arch/i18n/config 下面，一共有两个，中文和英文

加载样式并渲染 app 组件

typescript 复制代码

dynamicImportMdBoxStyle();

typescript 复制代码

root.render(<App />);

app.tsx

逻辑很简单，就只是渲染了一些路由配置，路由配置在routes/index.tsx下面

根路由结构

scss 复制代码

/ (根路径)
├── Layout (主布局)
│   ├── / → /space (重定向)
│   ├── sign (登录页面)
│   ├── space (工作空间)
│   ├── work_flow (工作流)
│   └── explore (探索页面)
├── /open/docs/* (开放文档)
├── /docs/* (文档)
└── /information/auth/success (认证成功)