Local Webhook Testing
Before deploying your webhook endpoint to production, it’s recommended to test it locally. Since webhooks require a public URL, we’ll use ngrok to create a secure tunnel to your local development server (such as localhost:3000).
We recommend using ngrok for local webhook testing(free), but you can use any other service that provides a public URL with a secure tunnel.
Setting Up ngrok
Install ngrok
- Sign up for a free account at ngrok.com
- Download and install ngrok:
# Using npm
npm install ngrok -g
# Using Homebrew (macOS)
brew install ngrok
Configure ngrok
- Copy your authtoken from the ngrok dashboard
- Add it to your ngrok configuration:
ngrok config add-authtoken your-token-here
Start the Tunnel
- Start your local development server:
npm run dev
# Or whatever command you use to start your server
- In a new terminal window, create a tunnel to your local server:
ngrok http 3000
# Or whatever port your server is running on
You’ll see output similar to:
Session Status online
Account [email protected]
Version 3.5.0
Region United States (us)
Latency 21ms
Web Interface http://127.0.0.1:4040
Forwarding https://1234-your-url.ngrok-free.app -> http://localhost:3000
Testing Your Webhook
- Copy the HTTPS forwarding URL from ngrok (e.g.,
https://1234-your-url.ngrok-free.app
) - In the CyberBlog dashboard, add a new webhook using:
https://1234-your-url.ngrok-free.app/api/cyberblog # Or whatever route you want to use
- Your local server will now receive webhook events through the secure tunnel at the URL you specified (e.g.,
https://1234-your-url.ngrok-free.app/api/cyberblog
) - Create a basic route in your local app at
/api/cyberblog
that receives POST requests
export default async function handler(req, res) {
console.log(req.body)
res.status(200).json({ message: 'Webhook received' })
}
- Click on the
Test Webhook
button to send a test event in the CyberBlog webhook dashboard
The ngrok URL changes each time you restart the tunnel. You should delete this webhook after testing.
Monitoring Requests
ngrok provides a web interface to inspect all requests:
- Open
http://localhost:4040
in your browser - View request/response details in real-time
- Replay requests for debugging
Next Steps
Once you’ve verified your webhook implementation works locally:
- Check out how you should verify the webhook for maximum security
- Update the webhook URL in your dashboard to your production URL
- Remove the ngrok tunnel
- Deploy to production
Never use ngrok URLs in production. They are for development and testing only.
For more information about ngrok features and configuration, visit the ngrok documentation.