> ## 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">
    Натисніть кнопку нижче, щоб створити хмарний codespace для розробки server-pro.

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

    Рекомендуємо вибирати **Machine Type** щонайменше **4-core**. Щоб отримати потужніший тип машини, можна надіслати запит до офіційної служби підтримки GitHub, створивши звернення [тут](https://support.github.com/contact?tags=rr-codespaces%2Ccat_codespaces).

    <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`. Він може не підходити для старіших версій або інших гілок.

      Ми щодня збираємо Docker-образ для розробки за допомогою [GitHub Action](https://github.com/ayaka-notes/overleaf-pro/actions).
    </Warning>
  </Step>

  <Step title="Відкрийте Launchpad">
    Перейдіть на вкладку портів — ви побачите список доступних вебпортів. Натисніть на порт `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.