Ontwikkeltools instellen

​

Aanbevolen ontwikkeltools

Deze optionele services zijn niet nodig om Overleaf te draaien, maar worden sterk aanbevolen voor ontwikkeling, debugging en inspectie tijdens lokale ontwikkeling.

• Hoppscotch is een lichtgewicht tool voor het testen van API’s, vergelijkbaar met Postman, maar browsergebaseerd en zeer handig tijdens de ontwikkeling.
  • Frontend: http://localhost:3000
  • Proxy (om CORS te omzeilen): http://localhost:9159
• RedisInsight biedt een visuele interface om Redis-gegevens te inspecteren. De UI is beschikbaar op: http://localhost:5540
• Mongo Express is een webgebaseerde UI voor MongoDB. Je kunt http://localhost:8081 bezoeken met de inloggegevens: admin:pass

Voeg het volgende toe aan je 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

​

Hoppscotch instellen

​

API-verzoeken via proxy

Om Hoppscotch in te stellen, ga je naar http://localhost:3000 en open je het tabblad Instellingen. Stel Proxy in op http://localhost:9159, zodat je debugtools kunnen communiceren met de interne netwerken van de containers.

Nu kun je met http://web:3000/status testen of web actief is:

​

CSRF-problemen

Als je Postman of andere debugtools gebruikt om een POST-verzoek te versturen, kan het gebeuren dat het inloggen geweigerd wordt, met een 401-fout als gevolg. Dat komt doordat Overleaf beveiligd is met CSRF-verificatie.

In je console zie je mogelijk:

Om dit tijdens je Overleaf-ontwikkeling op te lossen, moet je je CSRF-token instellen. Hieronder volgt een gedetailleerde handleiding.

1. Pre-request toevoegen

   Voeg de volgende code toe aan Pre-Request

   

   Het script ziet er als volgt uit:

   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. Request-headers toevoegen

   Je moet de volgende headers toevoegen:

   Headernaam	Headerwaarde
   Content-Type	application/json
   X-Csrf-Token	<<csrftoken>>
   Cookie	<<cookie_header>>

   
3. Inloggen met API-tools

   Nu kun je inloggen met je gebruikersnaam en wachtwoord.

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

   Hieronder zie je het antwoord wanneer je een verkeerde gebruikersnaam of een verkeerd wachtwoord invoert.