Webhook guides

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<typeof helloWorldTask>("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<typeof helloWorldTask>("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.
+
+<Steps>
+
+<Step title="Run your Next.js app and the Trigger.dev dev server">
+
+First, run your Next.js app.
+
+<CodeGroup>
+
+    ```bash npm
+    npm run dev
+    ```
+
+    ```bash pnpm
+    pnpm run dev
+    ```
+
+    ```bash yarn
+    yarn dev
+    ```
+
+</CodeGroup>
+
+Then, open up a second terminal window and start the Trigger.dev dev server:
+
+<CodeGroup>
+
+    ```bash npm
+    npx trigger.dev@latest dev
+    ```
+
+    ```bash pnpm
+    pnpm dlx trigger.dev@latest dev
+    ```
+
+    ```bash yarn
+    yarn dlx trigger.dev@latest dev
+    ```
+
+    </CodeGroup>
+
+</Step>
+
+<Step title="Trigger the webhook with some dummy data">
+
+To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command:
+
+<Tip>
+  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.
+</Tip>
+
+```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.
+
+</Step>
+
+<Step title="Check the task ran successfully">
+
+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"}`.
+
+</Step>
+
+</Steps>

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<typeof helloWorldTask>("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.
+
+<Steps>
+
+<Step title="Run your Remix app and the Trigger.dev dev server">
+
+First, run your Remix app.
+
+<CodeGroup>
+
+    ```bash npm
+    npm run dev
+    ```
+
+    ```bash pnpm
+    pnpm run dev
+    ```
+
+    ```bash yarn
+    yarn dev
+    ```
+
+</CodeGroup>
+
+Then, open up a second terminal window and start the Trigger.dev dev server:
+
+<CodeGroup>
+
+    ```bash npm
+    npx trigger.dev@latest dev
+    ```
+
+    ```bash pnpm
+    pnpm dlx trigger.dev@latest dev
+    ```
+
+    ```bash yarn
+    yarn dlx trigger.dev@latest dev
+    ```
+
+    </CodeGroup>
+
+</Step>
+
+<Step title="Trigger the webhook with some dummy data">
+
+To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command:
+
+<Tip>
+  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.
+</Tip>
+
+```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.
+
+</Step>
+
+<Step title="Check the task ran successfully">
+
+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"}`.
+
+</Step>
+
+</Steps>

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";
 
+<Info>
+  The project created in this guide can be found in this [GitHub
+  repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase).
+</Info>
+
 ## 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.

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";
 
+<Info>
+  The project created in this guide can be found in this [GitHub
+  repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase).
+</Info>
+
 ## Overview
 
 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

@@ -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
+
+<CardGroup cols={2}>
+  <Card
+    title="Next.js - triggering tasks using webhooks"
+    icon="N"
+    href="/guides/frameworks/nextjs-webhooks"
+  >
+    How to create a webhook handler in a Next.js app, and trigger a task from it.
+  </Card>
+  <Card
+    title="Remix - triggering tasks using webhooks"
+    icon="R"
+    href="/guides/frameworks/remix-webhooks"
+  >
+    How to create a webhook handler in a Remix app, and trigger a task from it.
+  </Card>
+</CardGroup>
+
+<Note>
+  If you would like to see a webhook guide for your framework, please request it in our [Discord
+  server](https://trigger.dev/discord).
+</Note>

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
 

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"
+          ]
         }
       ]
     },