Skip to content

Workflow 003: Webhook Testing Workflow ​

Fresh

Use ngrok to receive webhooks from external services (Stripe, GitHub, Slack, etc.) during local development.

Decision Tree ​

Step-by-Step ​

1. Start Your Webhook Handler ​

bash
# Example: Express.js webhook endpoint
node webhook-server.js
# Listening on http://localhost:3000/webhooks

2. Start ngrok ​

bash
ngrok http 3000

Note the forwarding URL, e.g. https://abc123.ngrok-free.app

3. Configure the External Service ​

Set the webhook URL in your service's settings:

https://abc123.ngrok-free.app/webhooks

4. Trigger and Inspect ​

  • Trigger a test event from the external service
  • Watch the ngrok console for incoming requests
  • Check your local handler's logs for processing

5. Iterate ​

The ngrok console shows full request/response details. Use this to debug:

  • Request headers
  • Request body
  • Response status code
  • Response body

Common Webhook Services ​

ServiceWhere to Configure
StripeDashboard > Developers > Webhooks
GitHubRepository > Settings > Webhooks
SlackApp Config > Event Subscriptions
TwilioConsole > Phone Numbers > Webhook
DiscordServer Settings > Integrations > Webhooks
ShopifySettings > Notifications > Webhooks

Tips ​

Stable URL for Development

Use a reserved domain so you don't have to reconfigure webhooks every time you restart ngrok:

bash
ngrok http 3000 --url https://webhooks-dev.ngrok.app

Replay Requests

The ngrok web interface at http://localhost:4040 lets you inspect and replay webhook requests for debugging.

See Also ​

Built with VitePress + Claude RAG Chat