如何快速搭建Stoat for Web开发环境：从克隆仓库到本地运行的完整教程

Stoat for Web（for-web）是 Stoat 聊天平台的官方浏览器客户端，使用 Solid.js 构建，提供消息、服务器、语音通话与个性化主题等完整功能。本文带你从克隆仓库到本地运行，手把手搭好开发环境，全程只需不到 10 分钟。

环境准备：先装好这两个工具

项目使用 mise-en-place 要求 node >= 16、pnpm >= 6），因此开始前只需安装：

• Git —— 克隆仓库必备
• mise —— 一键管理并安装所有工具链与依赖

如果你偏好 Nix，仓库还附带了 flake.nix，执行 nix develop 即可进入内置了 mise 与 Playwright 的开发 Shell。

一键克隆仓库（含子模块）

git clone --recursive https://gitcode.com/gh_mirrors/fo/for-web client
cd client

⚠️ 记得带 --recursive！项目包含 3 个 Git 子模块（见 .gitmodules）：SDK 库 stoat.js、品牌资源 packages/client/assets、语音组件库 solid-livekit-components。若漏了，之后可用 git submodule init && git submodule update 补全。

安装依赖并构建工作区

这是一个 pnpm 多包工作区（见 pnpm-workspace.yaml），包含 packages/client（Web 前端）、packages/stoat.js（SDK）、packages/solid-livekit-components（语音组件）三个子包。

# 安装全部依赖（锁定 lockfile，保证版本一致）
mise install:frozen

# 构建子包依赖：stoat.js、LiveKit 组件 + 编译 i18n 翻译
mise build:deps

这两步等价于在 .mise/tasks/ 中定义的自动化任务：

• install:frozen → pnpm install --frozen-lockfile（install/frozen）
• build:deps → 依次构建 stoat.js 与 LiveKit 组件，并编译 Lingui 翻译文件

配置 .env：连接本地还是官方后端

前端通过 Vite 环境变量决定连接哪个后端，模板文件在 packages/client/.env.example：

cp packages/client/.env.example packages/client/.env

关键配置说明：

变量	作用
VITE_API_URL	后端 API 地址，默认 http://localhost:14702（本地 Stoat 实例）
VITE_HOST	前端访问地址，默认 localhost:4173
VITE_SENTRY_DSN	错误上报 DSN，可留空

💡 没有本地后端？ 直接把 VITE_API_URL 这一行注释掉，客户端会自动回退到官方托管后端（逻辑见 env.ts），即可直接体验。

启动开发服务器

mise dev

启动后打开 http://local.revolt.chat:5173 即可看到运行中的客户端。开发服务器由 Vite 驱动，修改代码后支持热更新；相关路由映射（/login、/settings、/channel 等）定义在 Content.tsx。

改完代码想跑一遍 CI 同款检查？执行 mise check 即可在本地完成 Lint 与构建校验（任务定义在 .mise/tasks/）。

想继续深入？

• 📖 项目结构速览：主入口 index.tsx，界面组件在 packages/client/src/interface/，通用 UI 组件在 packages/client/components/ui/
• 🎨 主题定制：Material 配色角色与主题参考见 doc/src/components/ui/themes/reference.md
• 📚 开发规范：代码风格约定见 GUIDELINES.md，文档站源文件在 doc/
• 🚀 构建产物：mise build 后可部署 packages/client/dist 目录

搞定！你现在已经拥有一个可运行、可热更新的 Stoat for Web 开发环境，可以开始体验或为项目贡献代码了。