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

# Nastavení vývojových nástrojů

## Doporučené vývojové nástroje

Tyto volitelné služby nejsou ke spuštění Overleafu potřeba, ale pro vývoj, ladění a kontrolu během lokálního vývoje je důrazně doporučujeme.

* **Hoppscotch** je odlehčený nástroj pro testování API podobný Postmanu, který ale běží v prohlížeči a je pro vývoj velmi pohodlný.
  * Frontend: [http://localhost:3000](http://localhost:3000/)
  * Proxy (pro obejití CORS): [http://localhost:9159](http://localhost:9159/)
* **RedisInsight** poskytuje vizuální rozhraní pro prohlížení dat v Redisu. Rozhraní je dostupné na: [http://localhost:5540](http://localhost:5540/)
* **Mongo Express** je webové rozhraní pro MongoDB. Můžete navštívit [http://localhost:8081](http://localhost:8081/) s **přihlašovacími údaji**: `admin:pass`

Přidejte prosím do svého `docker-compose.yml` následující:

<Accordion title="develop/docker-compose.yml">
  ```yml title="develop/docker-compose.yml" theme={null}
  # services: 
    # Overleaf Dev Containers
    # ...
    
    # Add those for your development
    # API debug
    hoppscotch-frontend:
      image: hoppscotch/hoppscotch-frontend:latest
      ports:
        - "3000:3000"

    hoppscotch-proxy:
      image: hoppscotch/proxyscotch:latest
      environment:
        - PORT=9159
      ports:
        - "9159:9159"

    # Redis-insight
    redis-insight:
      image: redislabs/redisinsight:latest
      ports:
        - "5540:5540"
      depends_on:
        - redis
      volumes:
        - ./data/redis-insight:/data

    # mongo-express
    # basicAuth credentials are "admin:pass"
    mongo-express:
      image: mongo-express
      ports:
        - "8081:8081"
      environment:
        ME_CONFIG_MONGODB_SERVER: mongo
  ```
</Accordion>

### Nastavení Hoppscotch

#### Proxy pro požadavky API

Pro nastavení Hoppscotch navštivte [http://localhost:3000](http://localhost:3000/) a přejděte na kartu nastavení. Musíte nastavit `Proxy` na [http://localhost:9159](http://localhost:9159/), aby vaše ladicí nástroje mohly komunikovat s interními sítěmi kontejnerů.

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

Nyní můžete pomocí [http://web:3000/status](http://web:3000/status) otestovat, zda služba web běží:

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

#### Problémy s CSRF

<Warning>
  Pokud pomocí Postmanu nebo jiných ladicích nástrojů vytvoříte požadavek **POST**, můžete zjistit, že přihlášení je **zakázáno** a příčinou je chyba 401. Je to proto, že Overleaf je chráněn ověřováním **CSRF**.
</Warning>

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

V konzoli můžete vidět:

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

Abyste to při vývoji Overleafu vyřešili, musíte nastavit CSRF token. Zde je podrobný návod.

<Steps>
  <Step title="Přidání Pre-Request skriptu">
    Přidejte následující kód do Pre-Request

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

    Skript je následující:

    ```js wrap theme={null}
    pm.sendRequest("http://web:3000/dev/csrf", function (err, res) {
        if (err) {
            console.log(err);
            return;
        }

        // 1) Save CSRF token (/dev/csrf)
        const token = res.text().trim();
        pw.env.set("csrftoken", token);
        console.log("csrftoken =", token);

        const setCookieHeader = (res.headers || []).find(h => h.key?.toLowerCase() === "set-cookie")?.value;
        console.log("set-cookie =", setCookieHeader);

        if (!setCookieHeader) return;

        const cookiePair = setCookieHeader.split(";")[0].trim(); // overleaf.sid=...
        pw.env.set("cookie_header", cookiePair);
        console.log("cookie_header =", cookiePair);
    });
    ```
  </Step>

  <Step title="Přidání hlaviček požadavku">
    Musíte přidat následující hlavičky:

    | Název hlavičky | Hodnota hlavičky |
    | - | - |
    | Content-Type | `application/json` |
    | X-Csrf-Token | `<<csrftoken>>` |
    | Cookie | `<<cookie_header>>` |

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

  <Step title="Přihlášení pomocí nástrojů API">
    Nyní se můžete přihlásit pomocí svého uživatelského jména a hesla.

    ```json5 theme={null}
    {
      "_csrf": "<<csrftoken>>",
      "email": "admin@overleaf.com",
      "password": "xxxxxx"
    }
    ```

    Takto vypadá odpověď, když zadáte nesprávné uživatelské jméno nebo heslo.

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


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