开发环境搭建

本指南将帮助你搭建 Onlook 的本地开发环境。涉及一个 Next.js 应用程序、一个 Supabase 后端，以及使用 Codesandbox 运行开发容器的能力。

注意：本指南适用于 Onlook 的开发和贡献。若需将 Onlook 部署用于生产环境，请参见自托管。

前置条件

以下是搭建 Onlook 开发环境的前置条件。

Bun - 支持运行 monorepo
Docker - 支持运行 Supabase 后端
Node – 最低版本 v20.16.0 或最新版

搭建步骤

1. 克隆仓库

git clone https://github.com/onlook-dev/onlook.git
cd onlook
bun install

2. 启动后端

确保你已经按照上述说明启动了 Docker。

bun backend:start

从输出中获取 anon key 和 service role key。我们将在环境配置步骤中使用它们。

3. 获取 API 密钥

a. 获取 Codesandbox API 密钥

访问 Codesandbox 控制台
点击左侧菜单的设置，进入你的工作区设置
导航至“API”标签页
点击“创建 API Token”，生成 API 令牌
复制该令牌并保存，用于环境配置步骤

注意：我们计划在确定最佳 API 集成方案后，未来支持使用 Docker Desktop 运行开发容器。

b. 获取 OpenRouter API 密钥

向 OpenRouter 申请 API 密钥，用于与你的项目聊天。https://openrouter.ai/settings/keys

c. 获取 Fast Apply API 密钥

为了应用 AI 代码，最先进的方法是使用 Fast Apply 模型解决代码变更。Fast Apply 提供商有两个选项：

你只需要获取其中一个密钥，并在后续步骤的环境变量中进行设置。

4. 设置环境变量

运行交互式环境配置脚本：

bun run setup:env

故障排查：如果交互式环境配置脚本出现问题，请参考此说明手动设置环境变量：附录

5. 初始化数据库

设置数据库架构。每当数据库架构有变更时，都需运行此命令。

注意：若提示选择项等交互操作，进入 packages/db 目录，运行 bun run db:push 启用交互模式。

bun db:push

6. 用测试数据初始化数据库

用测试数据初始化数据库，将创建测试用户和项目。

bun db:seed

7. 运行开发服务器

bun dev

访问 http://localhost:3000 查看应用运行情况。至此，开发环境搭建完成！

下一步？

现在你已在本地运行 Onlook，可以浏览以下资源，开始你的第一次贡献或深入了解架构。理解 Onlook 的工作原理将帮助你更有效地为这个基于 React 和 TailwindCSS 的可视化编辑器贡献代码。