Skip to content

Commit a6dbf84

Browse files
D-K-PD-K-P
authored
Webhook guides (#1396)
* Added nextjs webhook guide * Updated intro page * Copy improvement * Added repo links to both supabase guides * Updated structure and added an overview page * Updated guides and simplified example code * Added webhook handler for pages and split the docs * Updated links
1 parent 73f8d4f commit a6dbf84

7 files changed

+305
-4
lines changed

‎docs/guides/frameworks/nextjs-webhooks.mdx

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
---
2+
title: "Triggering tasks with webhooks in Next.js"
3+
sidebarTitle: "Next.js webhooks"
4+
description: "Learn how to trigger a task from a webhook in a Next.js app."
5+
---
6+
7+
## Prerequisites
8+
9+
- [A Next.js project, set up with Trigger.dev](/guides/frameworks/nextjs)
10+
- [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler.
11+
12+
## Adding the webhook handler
13+
14+
The webhook handler in this guide will be an API route.
15+
16+
This will be different depending on whether you are using the Next.js pages router or the app router.
17+
18+
### Pages router: creating the webhook handler
19+
20+
Create a new file `pages/api/webhook-handler.ts` or `pages/api/webhook-hander.js`.
21+
22+
In your new file, add the following code:
23+
24+
```ts /pages/api/webhook-handler.ts
25+
import { helloWorldTask } from "@/trigger/example";
26+
import { tasks } from "@trigger.dev/sdk/v3";
27+
import type { NextApiRequest, NextApiResponse } from "next";
28+
29+
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
30+
// Parse the webhook payload
31+
const payload = req.body;
32+
33+
// Trigger the helloWorldTask with the webhook data as the payload
34+
await tasks.trigger<typeof helloWorldTask>("hello-world", payload);
35+
36+
res.status(200).json({ message: "OK" });
37+
}
38+
```
39+
40+
This code will handle the webhook payload and trigger the 'Hello World' task.
41+
42+
### App router: creating the webhook handler
43+
44+
Create a new file in the `app/api/webhook-handler/route.ts` or `app/api/webhook-handler/route.js`.
45+
46+
In your new file, add the following code:
47+
48+
```ts /app/api/webhook-handler/route.ts
49+
import type { helloWorldTask } from "@/trigger/example";
50+
import { tasks } from "@trigger.dev/sdk/v3";
51+
import { NextResponse } from "next/server";
52+
53+
export async function POST(req: Request) {
54+
// Parse the webhook payload
55+
const payload = await req.json();
56+
57+
// Trigger the helloWorldTask with the webhook data as the payload
58+
await tasks.trigger<typeof helloWorldTask>("hello-world", payload);
59+
60+
return NextResponse.json("OK", { status: 200 });
61+
}
62+
```
63+
64+
This code will handle the webhook payload and trigger the 'Hello World' task.
65+
66+
## Triggering the task locally
67+
68+
Now that you have your webhook handler set up, you can trigger the 'Hello World' task from it. We will do this locally using cURL.
69+
70+
<Steps>
71+
72+
<Step title="Run your Next.js app and the Trigger.dev dev server">
73+
74+
First, run your Next.js app.
75+
76+
<CodeGroup>
77+
78+
```bash npm
79+
npm run dev
80+
```
81+
82+
```bash pnpm
83+
pnpm run dev
84+
```
85+
86+
```bash yarn
87+
yarn dev
88+
```
89+
90+
</CodeGroup>
91+
92+
Then, open up a second terminal window and start the Trigger.dev dev server:
93+
94+
<CodeGroup>
95+
96+
```bash npm
97+
npx trigger.dev@latest dev
98+
```
99+
100+
```bash pnpm
101+
pnpm dlx trigger.dev@latest dev
102+
```
103+
104+
```bash yarn
105+
yarn dlx trigger.dev@latest dev
106+
```
107+
108+
</CodeGroup>
109+
110+
</Step>
111+
112+
<Step title="Trigger the webhook with some dummy data">
113+
114+
To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command:
115+
116+
<Tip>
117+
If `http://localhost:3000` isn't the URL of your locally running Next.js app, replace the URL in
118+
the below command with that URL instead.
119+
</Tip>
120+
121+
```bash
122+
curl -X POST -H "Content-Type: application/json" -d '{"Name": "John Doe", "Age": "87"}' http://localhost:3000/api/webhook-handler
123+
```
124+
125+
This will send a POST request to your webhook handler, with a JSON payload.
126+
127+
</Step>
128+
129+
<Step title="Check the task ran successfully">
130+
131+
After running the command, you should see a successful dev run and a 200 response in your terminals.
132+
133+
If you now go to your [Trigger.dev dashboard](https://cloud.trigger.dev), you should also see a successful run for the 'Hello World' task, with the payload you sent, in this case; `{"name": "John Doe", "age": "87"}`.
134+
135+
</Step>
136+
137+
</Steps>

‎docs/guides/frameworks/remix-webhooks.mdx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: "Triggering tasks with webhooks in Remix"
3+
sidebarTitle: "Remix webhooks"
4+
description: "Learn how to trigger a task from a webhook in a Remix app."
5+
---
6+
7+
## Prerequisites
8+
9+
- [A Remix project, set up with Trigger.dev](/guides/frameworks/remix)
10+
- [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler.
11+
12+
## Adding the webhook handler
13+
14+
The webhook handler in this guide will be an API route. Create a new file `app/routes/api.webhook-handler.ts` or `app/routes/api.webhook-handler.js`.
15+
16+
In your new file, add the following code:
17+
18+
```ts /api/webhook-handler.ts
19+
import type { ActionFunctionArgs } from "@remix-run/node";
20+
import { tasks } from "@trigger.dev/sdk/v3";
21+
import { helloWorldTask } from "src/trigger/example";
22+
23+
export async function action({ request }: ActionFunctionArgs) {
24+
const payload = await request.json();
25+
26+
// Trigger the helloWorldTask with the webhook data as the payload
27+
await tasks.trigger<typeof helloWorldTask>("hello-world", payload);
28+
29+
return new Response("OK", { status: 200 });
30+
}
31+
```
32+
33+
This code will handle the webhook payload and trigger the 'Hello World' task.
34+
35+
## Triggering the task locally
36+
37+
Now that you have a webhook handler set up, you can trigger the 'Hello World' task from it. We will do this locally using cURL.
38+
39+
<Steps>
40+
41+
<Step title="Run your Remix app and the Trigger.dev dev server">
42+
43+
First, run your Remix app.
44+
45+
<CodeGroup>
46+
47+
```bash npm
48+
npm run dev
49+
```
50+
51+
```bash pnpm
52+
pnpm run dev
53+
```
54+
55+
```bash yarn
56+
yarn dev
57+
```
58+
59+
</CodeGroup>
60+
61+
Then, open up a second terminal window and start the Trigger.dev dev server:
62+
63+
<CodeGroup>
64+
65+
```bash npm
66+
npx trigger.dev@latest dev
67+
```
68+
69+
```bash pnpm
70+
pnpm dlx trigger.dev@latest dev
71+
```
72+
73+
```bash yarn
74+
yarn dlx trigger.dev@latest dev
75+
```
76+
77+
</CodeGroup>
78+
79+
</Step>
80+
81+
<Step title="Trigger the webhook with some dummy data">
82+
83+
To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command:
84+
85+
<Tip>
86+
If `http://localhost:5173` isn't the URL of your locally running Remix app, replace the URL in the
87+
below command with that URL instead.
88+
</Tip>
89+
90+
```bash
91+
curl -X POST -H "Content-Type: application/json" -d '{"Name": "John Doe", "Age": "87"}' http://localhost:5173/api/webhook-handler
92+
```
93+
94+
This will send a POST request to your webhook handler, with a JSON payload.
95+
96+
</Step>
97+
98+
<Step title="Check the task ran successfully">
99+
100+
After running the command, you should see a successful dev run and a 200 response in your terminals.
101+
102+
If you now go to your [Trigger.dev dashboard](https://cloud.trigger.dev), you should also see a successful run for the 'Hello World' task, with the payload you sent, in this case; `{"name": "John Doe", "age": "87"}`.
103+
104+
</Step>
105+
106+
</Steps>

‎docs/guides/frameworks/supabase-edge-functions-basic.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.md
1717
import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx";
1818
import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx";
1919

20+
<Info>
21+
The project created in this guide can be found in this [GitHub
22+
repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase).
23+
</Info>
24+
2025
## Overview
2126

2227
Supabase edge functions allow you to trigger tasks either when an event is sent from a third party (e.g. when a new Stripe payment is processed, when a new user signs up to a service, etc), or when there are any changes or updates to your Supabase database.

‎docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.md
1313
import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx";
1414
import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx";
1515

16+
<Info>
17+
The project created in this guide can be found in this [GitHub
18+
repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase).
19+
</Info>
20+
1621
## Overview
1722

1823
Supabase and Trigger.dev can be used together to create powerful workflows triggered by real-time changes in your database tables:

‎docs/guides/frameworks/webhooks-guides-overview.mdx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: "Using webhooks with Trigger.dev"
3+
sidebarTitle: "Overview"
4+
description: "Guides for using webhooks with Trigger.dev."
5+
---
6+
7+
## Overview
8+
9+
Webhooks are a way to send and receive events from external services. Triggering tasks using webhooks allow you to add real-time, event driven functionality to your app.
10+
11+
A webhook handler is code that executes in response to an event. They can be endpoints in your framework's routing which can be triggered by an external service.
12+
13+
## Webhook guides
14+
15+
<CardGroup cols={2}>
16+
<Card
17+
title="Next.js - triggering tasks using webhooks"
18+
icon="N"
19+
href="/guides/frameworks/nextjs-webhooks"
20+
>
21+
How to create a webhook handler in a Next.js app, and trigger a task from it.
22+
</Card>
23+
<Card
24+
title="Remix - triggering tasks using webhooks"
25+
icon="R"
26+
href="/guides/frameworks/remix-webhooks"
27+
>
28+
How to create a webhook handler in a Remix app, and trigger a task from it.
29+
</Card>
30+
</CardGroup>
31+
32+
<Note>
33+
If you would like to see a webhook guide for your framework, please request it in our [Discord
34+
server](https://trigger.dev/discord).
35+
</Note>

‎docs/guides/introduction.mdx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,13 @@ import CardSupabase from "/snippets/card-supabase.mdx";
2424

2525
Get set up fast using our detailed walk-through guides.
2626

27-
| Guide | Description |
28-
| :---------------------------------------------------- | :------------------------------------------------------------------------------- |
29-
| [Prisma](/guides/frameworks/prisma) | This guide will show you how to setup Prisma with Trigger.dev |
30-
| [Sequin database triggers](/guides/frameworks/sequin) | This guide will show you how to trigger tasks from database changes using Sequin |
27+
| Guide | Description |
28+
| :----------------------------------------------------------------------------------------- | :------------------------------------------------------------ |
29+
| [Prisma](/guides/frameworks/prisma) | How to setup Prisma with Trigger.dev |
30+
| [Sequin database triggers](/guides/frameworks/sequin) | How to trigger tasks from database changes using Sequin |
31+
| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic) | How to trigger a task from a Supabase edge function |
32+
| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | How to trigger a task using a Supabase database webhook |
33+
| [Webhooks](/guides/frameworks/webhooks-guides-overview) | How to setup webhooks with Trigger.dev and various frameworks |
3134

3235
## Example tasks
3336

‎docs/mint.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,16 @@
285285
"guides/frameworks/supabase-edge-functions-basic",
286286
"guides/frameworks/supabase-edge-functions-database-webhooks"
287287
]
288+
},
289+
{
290+
"group": "Webhooks",
291+
"icon": "webhook",
292+
"iconType": "solid",
293+
"pages": [
294+
"guides/frameworks/webhooks-guides-overview",
295+
"guides/frameworks/nextjs-webhooks",
296+
"guides/frameworks/remix-webhooks"
297+
]
288298
}
289299
]
290300
},

0 commit comments

Comments
 (0)