> ## 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)

    建議將 **Machine Type** 選擇為至少 **4-core**。若需要更大的機器規格，你可以在[這裡](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` 分支的最新 commit 上設定好開發環境。它可能不適用於較舊的版本或其他分支。

      我們每天都會透過 [GitHub Action](https://github.com/ayaka-notes/overleaf-pro/actions) 建置開發用的 Docker 映像檔。
    </Warning>
  </Step>

  <Step title="存取你的 Launchpad">
    切換到連接埠（Ports）分頁，你會看到可用的網頁連接埠清單。點擊 `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.