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

# Configurer l'environnement de développement (Codespace)

> Configurez votre environnement de développement avec GitHub Codespace.

Pour gagner du temps et mettre en place rapidement l'environnement de développement, nous proposons une autre version de la configuration de l'environnement de développement : GitHub Codespace.

## Tutoriel de configuration

<Steps>
  <Step title="Créer un Codespace">
    Cliquez sur le bouton suivant pour créer un Codespace dans le cloud pour le développement de server-pro.

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

    Il est recommandé de choisir un **type de machine** d'au moins **4 cœurs**. Pour un type de machine plus puissant, vous pouvez en faire la demande auprès de l'équipe de support officielle de GitHub en ouvrant un ticket [ici](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="Lancer le script de configuration">
    Vous devrez patienter le temps que le Codespace soit créé. Une fois que vous avez accès à votre terminal, exécutez la commande suivante :

    ```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>
      Ce script (`bin/setup`) vous permet de configurer l'environnement de développement sur le dernier commit de la branche `server-pro` en un minimum de temps. Il peut ne pas convenir aux versions plus anciennes ou aux autres branches.

      Nous construisons chaque jour l'image Docker de développement avec [GitHub Action](https://github.com/ayaka-notes/overleaf-pro/actions).
    </Warning>
  </Step>

  <Step title="Accéder à votre Launchpad">
    Passez à l'onglet des ports : vous verrez la liste des ports web disponibles. Cliquez sur celui portant le numéro `80`. La page Launchpad devrait alors s'afficher.

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

    Vous verrez :

    <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="Bon développement">
    C'est maintenant à vous de jouer ! Commencez à développer vos fonctionnalités. Vous devez exécuter la commande suivante pour activer l'affichage en temps réel :

    ```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.