大家好！今天，我们将详细探讨在自定义 Backstage 或添加插件时，首先需要掌握的关键信息——项目结构。🚀
Backstage 采用单体仓库（Monorepo）结构，将众多包捆绑在一起。初次创建项目后，在众多文件夹中，很自然会产生疑问：“用户访问时看到的屏幕（Web 应用）代码到底在哪里？”今天，我们将完美解决您的这个疑问！💡
📍 答案：Web 应用的归宿，packages/app
在 Backstage 的默认项目结构中，显示在用户浏览器中的前端 Web 应用位于以下路径：
📂 /packages/app
Backstage 具有明确分离的后端 (packages/backend) 和前端 (packages/app) 结构。我们通过浏览器访问的所有 UI 和页面配置都在这个 app 文件夹内完成。
🔍 深入了解 packages/app 文件夹内部 🕵️♂️
仅仅知道位置是不够的，对吧？让我们详细看看 packages/app 文件夹是如何组织的。
1. src/App.tsx (主入口) 🚪
这个文件是 Backstage 前端的核心。
- 所有路由 (Routing) 设置都在这里管理。
- 它定义了哪个插件将显示在哪个 URL 路径（/catalog、/docs 等）。
- 它也是连接侧边栏菜单配置和应用程序整体主题的地方。
2. src/components/ (UI 组装块) 🧩
这里包含了整个应用程序中使用的 UI 组件。
- Root.tsx: 如果您想更改侧边栏 (Sidebar) 的徽标或菜单配置，您需要修改此文件。
- catalog/EntityPage.tsx: 这是一个非常重要的文件，它决定了服务详细页面的布局（例如，放置哪些卡片）。
3. public/ (静态资源) 🖼️
浏览器可以直接访问的静态文件存储在这里。
- favicon.ico、index.html 以及徽标图像文件等都位于此处。
🏗️ 为什么偏偏在 packages/ 下？ (单体仓库的魔力)
Backstage 之所以分为 packages/app 和 packages/backend，是为了可扩展性。
- 关注点分离： 前端开发人员可以专注于 app 文件夹中的 React 代码，后端开发人员可以专注于 backend 文件夹中的 Node.js 逻辑。🛠️
- 插件架构： Backstage 是通过组装众多外部插件来完成的。app 包充当了将这些插件的UI 汇集在一起的容器。📦
- 独立构建： 它提供了根据需要独立构建或部署前端和后端的灵活性。🏎️
💡 实战技巧：修改 UI 时的检查清单
如果您想更改 Backstage 的界面，请记住以下顺序！
- 想更改侧边栏图标或菜单？ ➡️ packages/app/src/components/Root.tsx
- 想添加新的插件页面？ ➡️ 在 packages/app/src/App.tsx 中添加 Route
- 想调整目录详细屏幕的选项卡？ ➡️ packages/app/src/components/catalog/EntityPage.tsx
- 想更改浏览器选项卡名称或图标？ ➡️ packages/app/public/index.html
🏁 结论：所有 UI 都始于 packages/app
在 Backstage 这个庞大的系统中，与用户交互的最前沿就是packages/app。仅仅理解这个结构，您就已经成功了 Backstage 定制的 50%！🚀
现在，不要犹豫，打开 packages/app 文件夹，描绘出您自己精彩的开发者门户吧。🎨
发表回复