Configurar ferramentas de desenvolvimento

​

Ferramentas de desenvolvimento recomendadas

Estes serviços opcionais não são necessários para executar o Overleaf, mas são altamente recomendados para desenvolvimento, depuração e inspeção durante o desenvolvimento local.

• Hoppscotch é uma ferramenta leve de teste de APIs semelhante ao Postman, mas baseada no navegador e muito conveniente para o desenvolvimento.
  • Frontend: http://localhost:3000
  • Proxy (para contornar CORS): http://localhost:9159
• RedisInsight fornece uma interface visual para inspecionar dados do Redis. Interface disponível em: http://localhost:5540
• Mongo Express é uma interface web para o MongoDB. Você pode acessar http://localhost:8081 com as credenciais: admin:pass

Adicione o seguinte ao seu 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

​

Configurar o Hoppscotch

​

Requisições de API via proxy

Para configurar o Hoppscotch, acesse http://localhost:3000 e vá até a aba de configurações. Você precisa definir o Proxy como http://localhost:9159, para que suas ferramentas de depuração possam interagir com as redes internas dos contêineres.

Agora você pode testar com http://web:3000/status para verificar se o web está ativo:

​

Problemas de CSRF

Se você usar o Postman ou outras ferramentas de depuração para gerar uma requisição post, poderá perceber que o login é proibido, resultando em um erro 401. Isso acontece porque o Overleaf é protegido por verificação csrf.

No seu console, você poderá ver:

Para lidar com isso no desenvolvimento do Overleaf, você precisa configurar o seu token csrf. Aqui está o tutorial detalhado.

1. Adicionar Pre-Request

   Adicione o seguinte código ao Pre-Request

   

   O script é o seguinte:

   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. Adicionar cabeçalhos da requisição

   Você precisa adicionar os seguintes cabeçalhos:

   Nome do cabeçalho	Valor do cabeçalho
   Content-Type	application/json
   X-Csrf-Token	<<csrftoken>>
   Cookie	<<cookie_header>>

   
3. Fazer login com ferramentas de API

   Agora você pode fazer login com seu nome de usuário e senha.

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

   Esta é a resposta quando você informa um nome de usuário ou senha incorretos.