How to test webhooks on localhost
Testing webhooks on your local system can be difficult, but there are ways tomake it possible using tools such aslocaltunnel andngrok.
Create an endpoint in your project
The first step in testing webhooks is making sure you have an API endpoint setup in your project. This is the endpoint that’ll receive the webhook event fromLiveblocks.
In order to use webhooks, we’ll need to retrieve theheaders andbody fromthe request. Here’s the basic endpoint we’ll be starting from:
exportasyncfunctionPOST(request: Request){const body=await request.json();const headers= request.headers;
// Handle webhooks// ...
returnnewResponse(null,{ status:200});}Create this endpoint in your project, and make it available onlocalhost atthe following URL:
/api/liveblocks-webhookTesting webhooks locally
Tools such aslocaltunnel andngrok allow you to temporarily place yourlocalhost server online, by providing you with a temporary URL. Let’s take alook at these two options.
localtunnel
localtunnel allows you to getstarted without signing up. If your project is running onlocalhost:3000, youcan run the followinglocaltunnel command to generate your URL, which willstay online while your localhost server is running:
$npx localtunnel --port3000localtunnel generates a base URL that can be placed into the Liveblockswebhooks dashboard for quick testing. To use this, take the full address of yourwebhook endpoint, and replace the domain in yourlocalhost address with thegenerated URL.
# Take your local URLhttp://localhost:3000/api/liveblocks-webhook
# Replace localhost with the generated domain, then copy ithttps://my-localtunnel-url.loca.lt/api/liveblocks-webhookYou now have a URL that can be used in the webhooks dashboard.
ngrok
ngrok requires you to sign up andinstall, but it has more features and is simpler to use after you’ve created anaccount. If your project is running onlocalhost:3000, you can run thefollowingngrok command to generate your URL, which will stay online whileyour localhost server is running:
$ngrok http3000ngrok generates a base URL that can be placed into the Liveblocks webhooksdashboard for quick testing. To use this, take the full address of your webhookendpoint, and replace the domain in yourlocalhost address with the generatedURL.
# Take your local URLhttp://localhost:3000/api/liveblocks-webhook
# Replace localhost with the generated domain, then copy ithttps://my-localtunnel-url.loca.lt/api/liveblocks-webhookYou now have a URL that can be used in the webhooks dashboard.
Set up webhooks on the Liveblocks dashboard
To use webhooks, you need to pass your endpoint URL to the webhooks dashboardinside your Liveblocks project, and tell the webhook to trigger on any specificwebhook events.
Select your project
From theLiveblocks dashboard, navigate to the project you’dlike to use with webhooks, or create a new project.
Go to the webhooks dashboard
Click on the“Webhooks” tab on the menu at the left.
Create an endpoint
Click the“Create endpoint…” button on the webhooks dashboard to startsetting up your webhook.
Add your endpoint URL
Enter the URL of the endpoint. In a production app this will be the realendpoint, but for now enter your
localtunnelorngrokURL from earlier.You can filter for any specificwebhook events here, in case you’d only like to listen to certain types.
Get your secret key
Click“Create endpoint” at the bottom, then find your“Webhook secretkey” on the next page, and copy it.
Webhooks dashboard is set up!
Done! Let’s go back to the code.
Verify the webhook request
It’s recommended to verify that your webhook requests have come from Liveblocks,and the@liveblocks/node packageprovides you with a function that will verify this for you. You can set this upby creating aWebhookHandler andrunningverifyRequest.
Make sure to add your "Webhook secret key" from the Liveblocks dashboard—in areal project we’d recommend using an environment variable for this.
import{ WebhookHandler}from"@liveblocks/node";
// Add your webhook secret key from a project's webhooks dashboardconstWEBHOOK_SECRET="YOUR_WEBHOOK_SECRET";const webhookHandler=newWebhookHandler(WEBHOOK_SECRET);
exportasyncfunctionPOST(request: Request){const body=await request.json();const headers= request.headers;
// Verify if this is a real webhook requestlet event;try{ event= webhookHandler.verifyRequest({ headers: headers, rawBody:JSON.stringify(body),});}catch(err){console.error(err);returnnewResponse("Could not verify webhook call",{ status:400});}
// Use webhook event// ...
returnnewResponse(null,{ status:200});}The webhook has now been verified!
Use your webhook event
From this point on, you can use the webhook event as you like. Here’s aComments example, showing you how to fetcha new thread after it’s just been created.
import{ WebhookHandler}from"@liveblocks/node";import{ Liveblocks}from"@liveblocks/node";
// Add your webhook secret key from a project's webhooks dashboardconstWEBHOOK_SECRET="YOUR_WEBHOOK_SECRET";const webhookHandler=newWebhookHandler(WEBHOOK_SECRET);
// Add your secret key from a project's API keys dashboardconstAPI_SECRET="";const liveblocks=newLiveblocks({ secret:API_SECRET});
exportasyncfunctionPOST(request: Request){const body=await request.json();const headers= request.headers;
// Verify if this is a real webhook requestlet event;try{ event= webhookHandler.verifyRequest({ headers: headers, rawBody:JSON.stringify(body),});}catch(err){console.error(err);returnnewResponse("Could not verify webhook call",{ status:400});}
// When a new thread has been createdif(event.type==="threadCreated"){const{ roomId, threadId}= event.data;
// Fetch new threadconst thread=await liveblocks.getThread({ roomId, threadId});
// Use thread// ...}
returnnewResponse(null,{ status:200});}Visit thewebhook events section ofour webhooks guide to learn more.
We use cookies to collect data to improve your experience on our site. Read ourPrivacy Policy to learn more.