From 349f2bad49d0593a3fd8d3c37c29759c430d0270 Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 9 Oct 2024 14:03:49 +0100 Subject: [PATCH 1/8] Added nextjs webhook guide --- docs/guides/frameworks/webhooks.mdx | 143 ++++++++++++++++++++++++++++ docs/mint.json | 3 +- 2 files changed, 145 insertions(+), 1 deletion(-) create mode 100644 docs/guides/frameworks/webhooks.mdx diff --git a/docs/guides/frameworks/webhooks.mdx b/docs/guides/frameworks/webhooks.mdx new file mode 100644 index 0000000000..b02fb1eb71 --- /dev/null +++ b/docs/guides/frameworks/webhooks.mdx @@ -0,0 +1,143 @@ +--- +title: "Setting up webhooks" +sidebarTitle: "Webhooks" +description: "Guides and examples for using webhooks with Trigger.dev." +icon: "webhook" +--- + +## Overview + +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. + +A webhook handler is code that executes in response to an event. They can be endpoints in your framework's routing which will be triggered by an external service, for example. + +In this guide you'll learn how to set up webhook handlers and trigger tasks from them using popular frameworks. + +## Frameworks featured in this guide + +- [Next.js](/guides/frameworks/webhooks#nextjs-webhook-configuration), pages or app router +- [Remix](/guides/frameworks/webhooks#remix-webhook-configuration) + + + If you would like to see a webhook guide for your framework, please request it in our [Discord + server](https://trigger.dev/discord). + + +## Next.js webhook configuration + +### Prerequisites + +- [A Next.js project, set up with Trigger.dev](/guides/frameworks/nextjs) +- [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler. + +### Adding a webhook handler + +The webhook handler will be an API route. The location of the route file will be different depending on whether you are using the pages router or the app router. + +- **Pages router** - create a new file `pages/api/webhook-handler.ts` or `pages/api/webhook-hander.js`. + +- **App router** - create a new file in the `app/api/webhook-handler/route.ts` or `app/api/webhook-handler/route.js`. + +The handler code will be the same for both routers. In this guide will use the 'Hello World' task as the example. + +In your new file, add the following code: + +```ts +import type { helloWorldTask } from "@/trigger/example"; +import { tasks } from "@trigger.dev/sdk/v3"; +import { NextResponse } from "next/server"; + +export async function POST(req: Request) { + try { + // Parse the webhook payload + const webhookData = await req.json(); + + // Trigger the helloWorldTask with the webhook data as the payload + const handle = await tasks.trigger("hello-world", webhookData); + + return NextResponse.json({ result: handle, ok: true }); + } catch (error) { + console.error(error); + return NextResponse.json({ message: "something went wrong", ok: false }, { status: 500 }); + } +} +``` + +### Triggering a task locally + +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. + + + + + +First, run your Next.js app. + + + + ```bash npm + npm run dev + ``` + + ```bash pnpm + pnpm run dev + ``` + + ```bash yarn + yarn dev + ``` + + + +Then, open up a second terminal window and start the Trigger.dev dev server: + + + + ```bash npm + npx trigger.dev@latest dev + ``` + + ```bash pnpm + pnpm dlx trigger.dev@latest dev + ``` + + ```bash yarn + yarn dlx trigger.dev@latest dev + ``` + + + + + + + +To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command: + + + If `http://localhost:3000` isn't the URL of your locally running Next.js app, replace the URL with + that URL instead. + + +```bash +curl -X POST -H "Content-Type: application/json" -d '{"Name": "John Doe", "Age": "87"}' http://localhost:3000/api/webhook-handler +``` + +This will send a POST request to your webhook handler, with a JSON payload. + + + + + +After running the command, you should see a successful dev run and a 200 response in your terminals. + +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"}`. + + + + + +## Remix webhook configuration + +### Prerequisites + +- [A Remix project, set up with Trigger.dev](/guides/frameworks/remix) diff --git a/docs/mint.json b/docs/mint.json index 8b133ac790..16e84859af 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -285,7 +285,8 @@ "guides/frameworks/supabase-edge-functions-basic", "guides/frameworks/supabase-edge-functions-database-webhooks" ] - } + }, + "guides/frameworks/webhooks" ] }, { From 605ba7999e23790aa9049dc621786124b6db8b6a Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 9 Oct 2024 14:04:00 +0100 Subject: [PATCH 2/8] Updated intro page --- docs/guides/introduction.mdx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/guides/introduction.mdx b/docs/guides/introduction.mdx index 7e41b7b853..98a39994ad 100644 --- a/docs/guides/introduction.mdx +++ b/docs/guides/introduction.mdx @@ -24,10 +24,13 @@ import CardSupabase from "/snippets/card-supabase.mdx"; Get set up fast using our detailed walk-through guides. -| Guide | Description | -| :---------------------------------------------------- | :------------------------------------------------------------------------------- | -| [Prisma](/guides/frameworks/prisma) | This guide will show you how to setup Prisma with Trigger.dev | -| [Sequin database triggers](/guides/frameworks/sequin) | This guide will show you how to trigger tasks from database changes using Sequin | +| Guide | Description | +| :------------------------------------------------------------------------------------------ | :------------------------------------------------------------ | +| [Prisma](/guides/frameworks/prisma) | How to setup Prisma with Trigger.dev | +| [Sequin database triggers](/guides/frameworks/sequin) | How to trigger tasks from database changes using Sequin | +| [Supabase edge function hello world](/guides/frameworks/supabase-edge-function-hello-world) | How to trigger a task from a Supabase edge function | +| [Supabase database webhooks](/guides/frameworks/supabase-database-webhooks) | How to trigger a task using a Supabase database webhook | +| [Webhooks](/guides/frameworks/webhooks) | How to setup webhooks with Trigger.dev and various frameworks | ## Example tasks From dbfbcc28734a97da7362d743ecc122c5b189a759 Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 9 Oct 2024 14:20:34 +0100 Subject: [PATCH 3/8] Copy improvement --- docs/guides/frameworks/webhooks.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/frameworks/webhooks.mdx b/docs/guides/frameworks/webhooks.mdx index b02fb1eb71..f3f0d6cefc 100644 --- a/docs/guides/frameworks/webhooks.mdx +++ b/docs/guides/frameworks/webhooks.mdx @@ -1,7 +1,7 @@ --- title: "Setting up webhooks" sidebarTitle: "Webhooks" -description: "Guides and examples for using webhooks with Trigger.dev." +description: "Guides for using webhooks with Trigger.dev." icon: "webhook" --- @@ -111,7 +111,7 @@ Then, open up a second terminal window and start the Trigger.dev dev server: -To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command: +To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command:π If `http://localhost:3000` isn't the URL of your locally running Next.js app, replace the URL with From f9ea034ce2f40805fbb60e60bcc6e494341816d7 Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 9 Oct 2024 14:20:45 +0100 Subject: [PATCH 4/8] Added repo links to both supabase guides --- docs/guides/frameworks/supabase-edge-functions-basic.mdx | 5 +++++ .../frameworks/supabase-edge-functions-database-webhooks.mdx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/docs/guides/frameworks/supabase-edge-functions-basic.mdx b/docs/guides/frameworks/supabase-edge-functions-basic.mdx index fecd5f0eb3..c239153c63 100644 --- a/docs/guides/frameworks/supabase-edge-functions-basic.mdx +++ b/docs/guides/frameworks/supabase-edge-functions-basic.mdx @@ -17,6 +17,11 @@ import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.md import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx"; import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx"; + + The project created in this guide can be found in this [GitHub + repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase). + + ## Overview 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. diff --git a/docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx b/docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx index 1060c419db..82c0872b1e 100644 --- a/docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx +++ b/docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx @@ -13,6 +13,11 @@ import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.md import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx"; import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx"; + + The project created in this guide can be found in this [GitHub + repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase). + + ## Overview Supabase and Trigger.dev can be used together to create powerful workflows triggered by real-time changes in your database tables: From 770e117a16a1184493251be1bf75b43073b8d2a4 Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 9 Oct 2024 17:14:26 +0100 Subject: [PATCH 5/8] Updated structure and added an overview page --- .../{webhooks.mdx => nextjs-webhooks.mdx} | 39 +++---------------- docs/guides/frameworks/remix-webhooks.mdx | 38 ++++++++++++++++++ .../frameworks/webhooks-guides-overview.mdx | 35 +++++++++++++++++ docs/mint.json | 11 +++++- 4 files changed, 89 insertions(+), 34 deletions(-) rename docs/guides/frameworks/{webhooks.mdx => nextjs-webhooks.mdx} (71%) create mode 100644 docs/guides/frameworks/remix-webhooks.mdx create mode 100644 docs/guides/frameworks/webhooks-guides-overview.mdx diff --git a/docs/guides/frameworks/webhooks.mdx b/docs/guides/frameworks/nextjs-webhooks.mdx similarity index 71% rename from docs/guides/frameworks/webhooks.mdx rename to docs/guides/frameworks/nextjs-webhooks.mdx index f3f0d6cefc..22bdcbacb1 100644 --- a/docs/guides/frameworks/webhooks.mdx +++ b/docs/guides/frameworks/nextjs-webhooks.mdx @@ -1,36 +1,15 @@ --- -title: "Setting up webhooks" -sidebarTitle: "Webhooks" -description: "Guides for using webhooks with Trigger.dev." -icon: "webhook" +title: "Triggering tasks with webhooks in Next.js" +sidebarTitle: "Next.js webhooks" +description: "Learn how to trigger a task from a webhook in a Next.js app." --- -## Overview - -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. - -A webhook handler is code that executes in response to an event. They can be endpoints in your framework's routing which will be triggered by an external service, for example. - -In this guide you'll learn how to set up webhook handlers and trigger tasks from them using popular frameworks. - -## Frameworks featured in this guide - -- [Next.js](/guides/frameworks/webhooks#nextjs-webhook-configuration), pages or app router -- [Remix](/guides/frameworks/webhooks#remix-webhook-configuration) - - - If you would like to see a webhook guide for your framework, please request it in our [Discord - server](https://trigger.dev/discord). - - -## Next.js webhook configuration - -### Prerequisites +## Prerequisites - [A Next.js project, set up with Trigger.dev](/guides/frameworks/nextjs) - [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler. -### Adding a webhook handler +## Adding a webhook handler The webhook handler will be an API route. The location of the route file will be different depending on whether you are using the pages router or the app router. @@ -63,7 +42,7 @@ export async function POST(req: Request) { } ``` -### Triggering a task locally +## Triggering a task locally 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. @@ -135,9 +114,3 @@ If you now go to your [Trigger.dev dashboard](https://cloud.trigger.dev), you sh - -## Remix webhook configuration - -### Prerequisites - -- [A Remix project, set up with Trigger.dev](/guides/frameworks/remix) diff --git a/docs/guides/frameworks/remix-webhooks.mdx b/docs/guides/frameworks/remix-webhooks.mdx new file mode 100644 index 0000000000..051acd6271 --- /dev/null +++ b/docs/guides/frameworks/remix-webhooks.mdx @@ -0,0 +1,38 @@ +--- +title: "Triggering tasks with webhooks in Remix" +sidebarTitle: "Remix webhooks" +description: "Learn how to trigger a task from a webhook in a Remix app." +--- + +## Prerequisites + +- [A Remix project, set up with Trigger.dev](/guides/frameworks/remix) +- [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler. + +## Adding a webhook handler + +The webhook handler will be an API route. Create a new file in `app/routes/api.webhook-handler.ts` or `app/routes/api.webhook-handler.js`. + +In your new file, add the following code: + +```ts /api/webhook-handler.ts +import type { ActionFunctionArgs } from "@remix-run/node"; +import { tasks } from "@trigger.dev/sdk/v3"; +import { helloWorldTask } from "src/trigger/example"; + +// This function can handle GET requests to check if the webhook is active in the browser - not required for Trigger but helpful for testing +export async function loader() { + return new Response("Webhook endpoint is active", { status: 200 }); +} + +// This function handles the actual webhook payload and triggers the helloWorldTask +export async function action({ request }: ActionFunctionArgs) { + const payload = await request.json(); + console.log("Received webhook payload:", payload); + + // Trigger the helloWorldTask with the webhook data as the payload + await tasks.trigger("hello-world", payload); + + return new Response("OK", { status: 200 }); +} +``` diff --git a/docs/guides/frameworks/webhooks-guides-overview.mdx b/docs/guides/frameworks/webhooks-guides-overview.mdx new file mode 100644 index 0000000000..4a4209d34c --- /dev/null +++ b/docs/guides/frameworks/webhooks-guides-overview.mdx @@ -0,0 +1,35 @@ +--- +title: "Using webhooks with Trigger.dev" +sidebarTitle: "Overview" +description: "Guides for using webhooks with Trigger.dev." +--- + +## Overview + +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. + +A webhook handler is code that executes in response to an event. They can be endpoints in your framework's routing which will be triggered by an external service. + +## Webhook guides + + + + How to create a webhook handler in a Next.js app, and trigger a task from it. + + + How to create a webhook handler in a Remix app, and trigger a task from it. + + + + + If you would like to see a webhook guide for your framework, please request it in our [Discord + server](https://trigger.dev/discord). + diff --git a/docs/mint.json b/docs/mint.json index 16e84859af..c0b43bc5cf 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -286,7 +286,16 @@ "guides/frameworks/supabase-edge-functions-database-webhooks" ] }, - "guides/frameworks/webhooks" + { + "group": "Webhooks", + "icon": "webhook", + "iconType": "solid", + "pages": [ + "guides/frameworks/webhooks-guides-overview", + "guides/frameworks/nextjs-webhooks", + "guides/frameworks/remix-webhooks" + ] + } ] }, { From e635a9a39cccbdc2fc52a0264f93735cee88af5d Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 9 Oct 2024 17:31:41 +0100 Subject: [PATCH 6/8] Updated guides and simplified example code --- docs/guides/frameworks/nextjs-webhooks.mdx | 33 ++++--- docs/guides/frameworks/remix-webhooks.mdx | 86 +++++++++++++++++-- .../frameworks/webhooks-guides-overview.mdx | 2 +- 3 files changed, 93 insertions(+), 28 deletions(-) diff --git a/docs/guides/frameworks/nextjs-webhooks.mdx b/docs/guides/frameworks/nextjs-webhooks.mdx index 22bdcbacb1..ec38795abd 100644 --- a/docs/guides/frameworks/nextjs-webhooks.mdx +++ b/docs/guides/frameworks/nextjs-webhooks.mdx @@ -9,9 +9,9 @@ description: "Learn how to trigger a task from a webhook in a Next.js app." - [A Next.js project, set up with Trigger.dev](/guides/frameworks/nextjs) - [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler. -## Adding a webhook handler +## Adding the webhook handler -The webhook handler will be an API route. The location of the route file will be different depending on whether you are using the pages router or the app router. +The webhook handler in this guide will be an API route. The location of the route file will be different depending on whether you are using the Next.js pages router or the app router. - **Pages router** - create a new file `pages/api/webhook-handler.ts` or `pages/api/webhook-hander.js`. @@ -27,22 +27,19 @@ import { tasks } from "@trigger.dev/sdk/v3"; import { NextResponse } from "next/server"; export async function POST(req: Request) { - try { - // Parse the webhook payload - const webhookData = await req.json(); - - // Trigger the helloWorldTask with the webhook data as the payload - const handle = await tasks.trigger("hello-world", webhookData); - - return NextResponse.json({ result: handle, ok: true }); - } catch (error) { - console.error(error); - return NextResponse.json({ message: "something went wrong", ok: false }, { status: 500 }); - } + // Parse the webhook payload + const payload = await req.json(); + + // Trigger the helloWorldTask with the webhook data as the payload + await tasks.trigger("hello-world", payload); + + return NextResponse.json("OK", { status: 200 }); } ``` -## Triggering a task locally +This code will handle the webhook payload and trigger the 'Hello World' task. + +## Triggering the task locally 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. @@ -90,11 +87,11 @@ Then, open up a second terminal window and start the Trigger.dev dev server: -To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command:π +To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command: - If `http://localhost:3000` isn't the URL of your locally running Next.js app, replace the URL with - that URL instead. + If `http://localhost:3000` isn't the URL of your locally running Next.js app, replace the URL in + the below command with that URL instead. ```bash diff --git a/docs/guides/frameworks/remix-webhooks.mdx b/docs/guides/frameworks/remix-webhooks.mdx index 051acd6271..3df269092a 100644 --- a/docs/guides/frameworks/remix-webhooks.mdx +++ b/docs/guides/frameworks/remix-webhooks.mdx @@ -9,9 +9,9 @@ description: "Learn how to trigger a task from a webhook in a Remix app." - [A Remix project, set up with Trigger.dev](/guides/frameworks/remix) - [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler. -## Adding a webhook handler +## Adding the webhook handler -The webhook handler will be an API route. Create a new file in `app/routes/api.webhook-handler.ts` or `app/routes/api.webhook-handler.js`. +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`. In your new file, add the following code: @@ -20,15 +20,8 @@ import type { ActionFunctionArgs } from "@remix-run/node"; import { tasks } from "@trigger.dev/sdk/v3"; import { helloWorldTask } from "src/trigger/example"; -// This function can handle GET requests to check if the webhook is active in the browser - not required for Trigger but helpful for testing -export async function loader() { - return new Response("Webhook endpoint is active", { status: 200 }); -} - -// This function handles the actual webhook payload and triggers the helloWorldTask export async function action({ request }: ActionFunctionArgs) { const payload = await request.json(); - console.log("Received webhook payload:", payload); // Trigger the helloWorldTask with the webhook data as the payload await tasks.trigger("hello-world", payload); @@ -36,3 +29,78 @@ export async function action({ request }: ActionFunctionArgs) { return new Response("OK", { status: 200 }); } ``` + +This code will handle the webhook payload and trigger the 'Hello World' task. + +## Triggering the task locally + +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. + + + + + +First, run your Remix app. + + + + ```bash npm + npm run dev + ``` + + ```bash pnpm + pnpm run dev + ``` + + ```bash yarn + yarn dev + ``` + + + +Then, open up a second terminal window and start the Trigger.dev dev server: + + + + ```bash npm + npx trigger.dev@latest dev + ``` + + ```bash pnpm + pnpm dlx trigger.dev@latest dev + ``` + + ```bash yarn + yarn dlx trigger.dev@latest dev + ``` + + + + + + + +To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command: + + + If `http://localhost:5173` isn't the URL of your locally running Remix app, replace the URL in the + below command with that URL instead. + + +```bash +curl -X POST -H "Content-Type: application/json" -d '{"Name": "John Doe", "Age": "87"}' http://localhost:5173/api/webhook-handler +``` + +This will send a POST request to your webhook handler, with a JSON payload. + + + + + +After running the command, you should see a successful dev run and a 200 response in your terminals. + +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"}`. + + + + diff --git a/docs/guides/frameworks/webhooks-guides-overview.mdx b/docs/guides/frameworks/webhooks-guides-overview.mdx index 4a4209d34c..3b50d00502 100644 --- a/docs/guides/frameworks/webhooks-guides-overview.mdx +++ b/docs/guides/frameworks/webhooks-guides-overview.mdx @@ -8,7 +8,7 @@ description: "Guides for using webhooks with Trigger.dev." 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. -A webhook handler is code that executes in response to an event. They can be endpoints in your framework's routing which will be triggered by an external service. +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. ## Webhook guides From 74b5660f90615bf78b45b2501ffd894f8d903b2c Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Thu, 10 Oct 2024 10:02:54 +0100 Subject: [PATCH 7/8] Added webhook handler for pages and split the docs --- docs/guides/frameworks/nextjs-webhooks.mdx | 36 ++++++++++++++++++---- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/docs/guides/frameworks/nextjs-webhooks.mdx b/docs/guides/frameworks/nextjs-webhooks.mdx index ec38795abd..4581450f9b 100644 --- a/docs/guides/frameworks/nextjs-webhooks.mdx +++ b/docs/guides/frameworks/nextjs-webhooks.mdx @@ -11,17 +11,41 @@ description: "Learn how to trigger a task from a webhook in a Next.js app." ## Adding the webhook handler -The webhook handler in this guide will be an API route. The location of the route file will be different depending on whether you are using the Next.js pages router or the app router. +The webhook handler in this guide will be an API route. -- **Pages router** - create a new file `pages/api/webhook-handler.ts` or `pages/api/webhook-hander.js`. +This will be different depending on whether you are using the Next.js pages router or the app router. -- **App router** - create a new file in the `app/api/webhook-handler/route.ts` or `app/api/webhook-handler/route.js`. +### Pages router: creating the webhook handler -The handler code will be the same for both routers. In this guide will use the 'Hello World' task as the example. +Create a new file `pages/api/webhook-handler.ts` or `pages/api/webhook-hander.js`. In your new file, add the following code: -```ts +```ts /pages/api/webhook-handler.ts +import { helloWorldTask } from "@/trigger/example"; +import { tasks } from "@trigger.dev/sdk/v3"; +import type { NextApiRequest, NextApiResponse } from "next"; + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + // Parse the webhook payload + const payload = req.body; + + // Trigger the helloWorldTask with the webhook data as the payload + await tasks.trigger("hello-world", payload); + + res.status(200).json({ message: "OK" }); +} +``` + +This code will handle the webhook payload and trigger the 'Hello World' task. + +### App router: creating the webhook handler + +Create a new file in the `app/api/webhook-handler/route.ts` or `app/api/webhook-handler/route.js`. + +In your new file, add the following code: + +```ts /app/api/webhook-handler/route.ts import type { helloWorldTask } from "@/trigger/example"; import { tasks } from "@trigger.dev/sdk/v3"; import { NextResponse } from "next/server"; @@ -41,7 +65,7 @@ This code will handle the webhook payload and trigger the 'Hello World' task. ## Triggering the task locally -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. +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. From bab25f49da269a7b06c686153075685527266eb4 Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Thu, 10 Oct 2024 10:14:30 +0100 Subject: [PATCH 8/8] Updated links --- docs/guides/introduction.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/guides/introduction.mdx b/docs/guides/introduction.mdx index 98a39994ad..fb97117182 100644 --- a/docs/guides/introduction.mdx +++ b/docs/guides/introduction.mdx @@ -24,13 +24,13 @@ import CardSupabase from "/snippets/card-supabase.mdx"; Get set up fast using our detailed walk-through guides. -| Guide | Description | -| :------------------------------------------------------------------------------------------ | :------------------------------------------------------------ | -| [Prisma](/guides/frameworks/prisma) | How to setup Prisma with Trigger.dev | -| [Sequin database triggers](/guides/frameworks/sequin) | How to trigger tasks from database changes using Sequin | -| [Supabase edge function hello world](/guides/frameworks/supabase-edge-function-hello-world) | How to trigger a task from a Supabase edge function | -| [Supabase database webhooks](/guides/frameworks/supabase-database-webhooks) | How to trigger a task using a Supabase database webhook | -| [Webhooks](/guides/frameworks/webhooks) | How to setup webhooks with Trigger.dev and various frameworks | +| Guide | Description | +| :----------------------------------------------------------------------------------------- | :------------------------------------------------------------ | +| [Prisma](/guides/frameworks/prisma) | How to setup Prisma with Trigger.dev | +| [Sequin database triggers](/guides/frameworks/sequin) | How to trigger tasks from database changes using Sequin | +| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic) | How to trigger a task from a Supabase edge function | +| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | How to trigger a task using a Supabase database webhook | +| [Webhooks](/guides/frameworks/webhooks-guides-overview) | How to setup webhooks with Trigger.dev and various frameworks | ## Example tasks