> ## Documentation Index
> Fetch the complete documentation index at: https://ayakaleaf-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 搭建开发环境（Codespace）

> 使用 GitHub Codespace 搭建你的开发环境。

为了节省时间并快速搭建开发环境，我们还提供了另一种开发环境配置方式，即 GitHub Codespace。

## 配置教程

<Steps>
  <Step title="创建 Codespaces">
    点击下方按钮，为 server-pro 开发创建一个云端 codespace。

    [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/ayaka-notes/overleaf-pro)

    建议选择至少 **4 核**的 **Machine Type**。如需更大规格的机器，你可以在[这里](https://support.github.com/contact?tags=rr-codespaces%2Ccat_codespaces)提交工单，向 GitHub 官方支持团队申请。

    <Frame>
      <img src="https://mintcdn.com/ayakaleaf-pro/x9kfDjtWlyyhG_mR/images/dev/image.png?fit=max&auto=format&n=x9kfDjtWlyyhG_mR&q=85&s=d723c8474a8fe076724ad4b8404c90a0" alt="" width="1319" height="990" data-path="images/dev/image.png" />
    </Frame>
  </Step>

  <Step title="运行安装脚本">
    创建 codespace 需要一些时间，请耐心等待。能够访问终端后，运行以下命令：

    ```text theme={null}
    cd develop/
    bin/setup
    ```

    <Frame>
      <img src="https://mintcdn.com/ayakaleaf-pro/x9kfDjtWlyyhG_mR/images/dev/image-1.png?fit=max&auto=format&n=x9kfDjtWlyyhG_mR&q=85&s=67fe318b5d049b5eb8317b41154ca3b4" alt="" width="1086" height="587" data-path="images/dev/image-1.png" />
    </Frame>

    <Warning>
      该脚本（`bin/setup`）可让你在最短时间内基于 `server-pro` 分支的最新提交搭建开发环境。它可能不适用于旧版本或其他分支。

      我们每天通过 [GitHub Action](https://github.com/ayaka-notes/overleaf-pro/actions) 构建开发用 Docker 镜像。
    </Warning>
  </Step>

  <Step title="访问 Launchpad">
    切换到端口（Ports）标签页，你会看到可用的 Web 端口列表。点击 `80` 端口，此时应能看到 launchpad 页面。

    <Frame>
      <img src="https://mintcdn.com/ayakaleaf-pro/x9kfDjtWlyyhG_mR/images/dev/image-2.png?fit=max&auto=format&n=x9kfDjtWlyyhG_mR&q=85&s=649782162b3038fde73e6b9c3be0a5ce" alt="" width="1492" height="589" data-path="images/dev/image-2.png" />
    </Frame>

    你将看到：

    <Frame>
      <img src="https://mintcdn.com/ayakaleaf-pro/x9kfDjtWlyyhG_mR/images/dev/image-3.png?fit=max&auto=format&n=x9kfDjtWlyyhG_mR&q=85&s=2cb7a394e9e4724a2145f5a631447237" alt="" width="1742" height="1183" data-path="images/dev/image-3.png" />
    </Frame>
  </Step>

  <Step title="开始开发">
    现在，尽情发挥吧！开始构建你的精彩功能。你需要运行以下命令以启用实时显示：

    ```bash title="bash" wrap theme={null}
    docker compose -f docker-compose.yml -f docker-compose.dev.yml -f ./docker-compose.image.yml up --no-deps --detach
    ```
  </Step>
</Steps>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.