Webhook Inspector

Ferramenta simples para inspecionar e depurar webhooks (API + interface web).

Este repositório contém dois pacotes dentro de um workspace:

• api — backend em Node.js/Fastify (TypeScript) responsável por receber e expor webhooks.
• web — frontend em React + Vite para visualizar e interagir com webhooks.

Tecnologias abordadas

• Node.js
• TypeScript
• Fastify
• Drizzle ORM (migrations/DB helpers)
• PostgreSQL (pg)
• Zod (validação)
• Vite + React (frontend)
• pnpm / npm (gerenciamento de pacotes)

Pré-requisitos

• Node.js (versão LTS recomendada)
• Git (opcional)
• pnpm recomendado para trabalhar com workspaces, mas npm também funciona.

Se quiser instalar o pnpm globalmente:

npm install -g pnpm

Instalação

No Windows PowerShell, na raiz do projeto:

• Usando pnpm (recomendado quando disponível):

Set-Location -LiteralPath 'C:\Users\<você>\caminho\para\webhook-inspector'
pnpm install

• Usando npm (fallback):

Set-Location -LiteralPath 'C:\Users\<você>\caminho\para\webhook-inspector'
npm install

Isso instalará dependências para os workspaces api e web.

Uso — desenvolvimento

Abra duas janelas/abas do terminal (uma para o backend, outra para o frontend).

• Backend (api):

Set-Location -LiteralPath 'C:\Users\<você>\caminho\para\webhook-inspector\api'
# Inicia em modo dev (usa tsx e carrega .env)
npm run dev
# ou, se usa pnpm
pnpm --filter api run dev

O servidor de desenvolvimento usa tsx watch --env-file=.env src/server.ts. Configure variáveis em api/.env conforme necessário.

• Frontend (web):

Set-Location -LiteralPath 'C:\Users\<você>\caminho\para\webhook-inspector\web'
npm run dev
# ou com pnpm
pnpm --filter web run dev

O Vite iniciará o servidor de desenvolvimento e abrirá a interface em http://localhost:5173 (porta padrão).

Build e produção

• Build do frontend:

Set-Location -LiteralPath 'C:\Users\<você>\caminho\para\webhook-inspector\web'
npm run build

• Build do backend (se você transpilar TypeScript manualmente):

Set-Location -LiteralPath 'C:\Users\<você>\caminho\para\webhook-inspector\api'
# Ajuste conforme suas configurações de build; por enquanto o projeto usa tsx para dev
# Exemplo genérico (se usar tsc):
npx tsc -p .
node dist/server.js

Scripts úteis

Alguns scripts já disponíveis nos pacotes:

• api:

  • dev — executa tsx watch --env-file=.env src/server.ts (desenvolvimento)
  • start — executa node dist/server.js
  • db:generate, db:migrate, db:studio — comandos do drizzle-kit para migrações/estúdio

• web:

  • dev — inicia Vite em modo desenvolvimento
  • build — executa tsc -b && vite build
  • preview — pré-visualiza build estático

Para executar qualquer script com pnpm em um workspace você pode usar pnpm --filter <pkg> run <script>.

Observações

• api carrega variáveis de ambiente via .env quando usado com tsx --env-file=.env — crie api/.env contendo as chaves necessárias (por exemplo, DATABASE_URL, PORT etc.).
• Se for usar PostgreSQL localmente, configure DATABASE_URL e use os scripts do drizzle-kit para migrar o banco.