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
  • Proxy (for CORS bypass): http://localhost:9159
• RedisInsight provides a visual interface for inspecting Redis data. UI available at: http://localhost:5540
• Mongo Express is a web-based UI for MongoDB. You can visit http://localhost:8081 with credentials: admin:pass

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

develop/docker-compose.yml

develop/docker-compose.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

Setup Hoppscotch

Proxy API Request

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

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

CSRF Problems

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.

In your console, you may see:

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

1. Add Pre Request

   Add the following code to Pre-Request

   

   The script is as list:

   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);
   });
   
2. 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>>

   
3. Login with API Tools

   Now you can login with your username and password.

   {
     "_csrf": "<<csrftoken>>",
     "email": "[e-mail]",
     "password": "xxxxxx"
   }
   

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