> For the complete documentation index, see [llms.txt](https://ayakaleaf-pro.ayaka.space/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayakaleaf-pro.ayaka.space/dev/environment/setup-develop-tools.md).

# Setup Develop Tools

## Develop Tools Recommended 

These optional services are not required to run Overleaf, but they are highly recommended for development, debugging, and inspection during local development.

* **Hoppscotch** is a lightweight API testing tool similar to Postman, but browser-based and very convenient for development.
  * Frontend: [http://localhost:3000](http://localhost:3000/)
  * Proxy (for CORS bypass): [http://localhost:9159](http://localhost:9159/)
* **RedisInsight** provides a visual interface for inspecting Redis data. UI available at: [http://localhost:5540](http://localhost:5540/)
* **Mongo Express** is a web-based UI for MongoDB. You can visit [http://localhost:8081](http://localhost:8081/) with **credentials**: `admin:pass`

Please add the following to your `docker-compose.yml` :

<details>

<summary>develop/docker-compose.yml</summary>

{% code title="develop/docker-compose.yml" %}

```yml
# 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
```

{% endcode %}

</details>

### Setup Hoppscotch

#### Proxy API Request

To setup Hoppscotch, you can visit [http://localhost:3000](http://localhost:3000/), then go to setting tab. You need to set `Proxy` to [http://localhost:9159](http://localhost:9159/), so that your debug tools can interact with container internal Networks.

<figure><img src="/files/DI7ZUEjv0zfhXDCOSmoZ" alt=""><figcaption></figcaption></figure>

Now you can test with <http://web:3000/status> to check if web is alive:

<figure><img src="/files/4FN4NiXTV8Y8FBFPlqCm" alt=""><figcaption></figcaption></figure>

#### CSRF Problems

{% hint style="warning" %}
If you use postman or other debug tools to generate a **post** request, you may find the login is **forbidden**, and the reason is for the 401 error. That's because Overleaf is protected by **csrf** verification.
{% endhint %}

<figure><img src="/files/hHhpjFjlgt4SNsEJN9Vn" alt=""><figcaption></figcaption></figure>

In your console, you may see:

<figure><img src="/files/lEALRS6f4GVMYXZpUqHH" alt=""><figcaption></figcaption></figure>

To deal with this in your overleaf development, you need to setup your csrf token. Here is the detailed tutorial.

{% stepper %}
{% step %}

### Add Pre Request

Add the following code to Pre-Request

<figure><img src="/files/OpFRJbzMmZKG4zz3231K" alt=""><figcaption></figcaption></figure>

The script is as list:

{% code overflow="wrap" %}

```js
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);
});
```

{% endcode %}
{% endstep %}

{% step %}

### Add Request Header

You need to add the following headers:

| Header Name  | Header Value        |
| ------------ | ------------------- |
| Content-Type | `application/json`  |
| X-Csrf-Token | `<<csrftoken>>`     |
| Cookie       | `<<cookie_header>>` |

<figure><img src="/files/BUWK4JMTo1XfZVdEVzJf" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Login with API Tools

Now you can login with your username and password.

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

Here is the response when you input the wrong username or password.

<figure><img src="/files/j0PSue2L9PstJh1xKfx7" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ayakaleaf-pro.ayaka.space/dev/environment/setup-develop-tools.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.