开发环境设置

【Development Setup】

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

【This guide will set you up with a local development environment for Onlook. This involves a Next.js app, a Supabase backend, and the ability to run dev containers with Codesandbox.】

注意：本指南适用于 Onlook 的开发和贡献。有关将 Onlook 部署到生产环境的使用，请参阅自托管。

先决条件

【Prerequisites】

这是建立 Onlook 开发环境的前提条件。

【These are the prerequisites for setting up Onlook development environment.】

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

安装

【Setup】

1. 克隆仓库

【1. Clone the repository】

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

2. 运行后台

【2. Run backend】

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

bun backend:start

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

3. 获取 API 密钥

【3. Get API keys】

a. 获取 Codesandbox API 密钥

【a. Get Codesandbox API key】

前往 Codesandbox 仪表板
点击左侧菜单中的设置，你的工作区设置应该会打开
导航到“API”选项卡
点击“创建 API 令牌”并生成一个 API 令牌
复制令牌并将其保存以便环境设置步骤使用

注意：我们计划在找到最佳的 API 集成方案后，在未来启用通过 Docker Desktop 运行开发容器。

【Note: We plan on enabling running the dev containers with Docker Desktop in the future after we figure out the best API integration. 】

b. 获取 OpenRouter API 密钥

【b. Get OpenRouter API key】

从 OpenRouter 请求一个 API 密钥。这用于与你的项目进行聊天。https://openrouter.ai/settings/keys

【Request an API key from OpenRouter. This is used for chatting with your project. https://openrouter.ai/settings/keys】

c. 获取 Fast Apply API 密钥

【c. Get Fast Apply API key】

在应用 AI 代码时，SOTA 方法是使用快速应用模型来解决代码更改问题。快速应用提供商有两种选择：

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

4. 设置环境变量

【4. Set environment variables】

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

【Run the interactive environment setup script:】

bun run setup:env

故障排除：如果在运行交互式环境设置脚本时遇到问题，请使用此说明手动设置环境变量：附录

5. 初始化数据库

【5. Initialize the database】

设置数据库架构。每次数据库架构发生变化时，都需要运行此命令。

【Set up the database schema. You will need to run this command every time there's a change to the database schema.】

注意：如果系统提示需要进行交互操作，例如选择一个选项，请切换到 packages/db 目录并运行 bun run db:push 来使用交互模式。

【Note: If prompted for interaction such as choosing an option, cd into packages/db and run bun run db:push to use interactive mode.】

bun db:push

6. 使用测试数据填充数据库

【6. Seed the database with test data】

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

【Seed the database with test data. This will create test users and projects.】

bun db:seed

7. 运行开发服务器

【7. Run development server】

bun dev

访问 http://localhost:3000 查看应用运行情况。你已经可以开始开发了！

【Go to http://localhost:3000 to see the app running. You're all set for development!】

接下来是什么？

【What's Next?】

现在你已经在本地运行了 Onlook，可以浏览这些资源来进行第一次贡献或深入了解其架构。理解 Onlook 的工作原理将帮助你更高效地为这个针对 React 和 TailwindCSS 的可视化编辑器做出贡献。

【Now that you have Onlook running locally, explore these resources to make your first contribution or learn more about the architecture. Understanding how Onlook works will help you contribute more effectively to this visual editor for React and TailwindCSS.】