diff --git a/docs/guides/frameworks/nextjs-webhooks.mdx b/docs/guides/frameworks/nextjs-webhooks.mdx new file mode 100644 index 0000000000..4581450f9b --- /dev/null +++ b/docs/guides/frameworks/nextjs-webhooks.mdx @@ -0,0 +1,137 @@ +--- +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." +--- + +## 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 the webhook handler + +The webhook handler in this guide will be an API route. + +This will be different depending on whether you are using the Next.js pages router or the app router. + +### Pages router: creating the webhook handler + +Create a new file `pages/api/webhook-handler.ts` or `pages/api/webhook-hander.js`. + +In your new file, add the following code: + +```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"; + +export async function POST(req: Request) { + // 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 }); +} +``` + +This code will handle the webhook payload and trigger the 'Hello World' task. + +## Triggering the task locally + +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. + + + + + +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 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: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"}`. + + + + diff --git a/docs/guides/frameworks/remix-webhooks.mdx b/docs/guides/frameworks/remix-webhooks.mdx new file mode 100644 index 0000000000..3df269092a --- /dev/null +++ b/docs/guides/frameworks/remix-webhooks.mdx @@ -0,0 +1,106 @@ +--- +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 the webhook handler + +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: + +```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"; + +export async function action({ request }: ActionFunctionArgs) { + const payload = await request.json(); + + // Trigger the helloWorldTask with the webhook data as the payload + await tasks.trigger("hello-world", payload); + + 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/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: diff --git a/docs/guides/frameworks/webhooks-guides-overview.mdx b/docs/guides/frameworks/webhooks-guides-overview.mdx new file mode 100644 index 0000000000..3b50d00502 --- /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 can 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/guides/introduction.mdx b/docs/guides/introduction.mdx index 7e41b7b853..fb97117182 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-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 diff --git a/docs/mint.json b/docs/mint.json index 8b133ac790..c0b43bc5cf 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -285,6 +285,16 @@ "guides/frameworks/supabase-edge-functions-basic", "guides/frameworks/supabase-edge-functions-database-webhooks" ] + }, + { + "group": "Webhooks", + "icon": "webhook", + "iconType": "solid", + "pages": [ + "guides/frameworks/webhooks-guides-overview", + "guides/frameworks/nextjs-webhooks", + "guides/frameworks/remix-webhooks" + ] } ] },