Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/guides/examples/stripe-webhook.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Trigger a task from Stripe webhook events"
sidebarTitle: "Stripe webhook"
sidebarTitle: "Stripe webhooks"
description: "This example demonstrates how to handle Stripe webhook events using Trigger.dev."
---

Expand Down
14 changes: 12 additions & 2 deletions docs/guides/frameworks/nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -244,14 +244,24 @@ Here are the steps to trigger your task in the Next.js App and Pages router and

</Tabs>

<AddEnvironmentVariables/>
<AddEnvironmentVariables />

<DeployingYourTask/>
<DeployingYourTask />

## Troubleshooting

<NextjsTroubleshootingMissingApiKey/>
<NextjsTroubleshootingButtonSyntax/>
<WorkerFailedToStartWhenRunningDevCommand/>

## Additional resources for Next.js

<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>

<UsefulNextSteps />
68 changes: 37 additions & 31 deletions docs/guides/frameworks/remix.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ description: "This guide will show you how to setup Trigger.dev in your existing
icon: "r"
---

import Prerequisites from '/snippets/framework-prerequisites.mdx';
import CliInitStep from '/snippets/step-cli-init.mdx';
import CliDevStep from '/snippets/step-cli-dev.mdx';
import CliRunTestStep from '/snippets/step-run-test.mdx';
import CliViewRunStep from '/snippets/step-view-run.mdx';
import UsefulNextSteps from '/snippets/useful-next-steps.mdx';
import Prerequisites from "/snippets/framework-prerequisites.mdx";
import CliInitStep from "/snippets/step-cli-init.mdx";
import CliDevStep from "/snippets/step-cli-dev.mdx";
import CliRunTestStep from "/snippets/step-run-test.mdx";
import CliViewRunStep from "/snippets/step-view-run.mdx";
import UsefulNextSteps from "/snippets/useful-next-steps.mdx";
import TriggerTaskRemix from "/snippets/trigger-tasks-remix.mdx";
import AddEnvironmentVariables from "/snippets/add-environment-variables.mdx";
import DeployingYourTask from "/snippets/deplopying-your-task.mdx";
Expand All @@ -20,10 +20,10 @@ import DeployingYourTask from "/snippets/deplopying-your-task.mdx";
## Initial setup

<Steps>
<CliInitStep />
<CliDevStep />
<CliRunTestStep />
<CliViewRunStep />
<CliInitStep />
<CliDevStep />
<CliRunTestStep />
<CliViewRunStep />
</Steps>

## Set your secret key locally
Expand All @@ -40,27 +40,24 @@ For more information on authenticating with Trigger.dev, see the [API keys page]

<Step title="Create an API route">

Create a new file called `api.hello-world.ts` (or `api.hello-world.js`) in the `app/routes` directory like this: `app/routes/api.hello-world.ts`.
Create a new file called `api.hello-world.ts` (or `api.hello-world.js`) in the `app/routes` directory like this: `app/routes/api.hello-world.ts`.

</Step>

<Step title="Add your task">

Add this code to your `api.hello-world.ts` file which imports your task:
Add this code to your `api.hello-world.ts` file which imports your task:

```ts app/routes/api.hello-world.ts
import type { helloWorldTask } from "../../src/trigger/example";
import { tasks } from "@trigger.dev/sdk/v3";
```ts app/routes/api.hello-world.ts
import type { helloWorldTask } from "../../src/trigger/example";
import { tasks } from "@trigger.dev/sdk/v3";

export async function loader() {
const handle = await tasks.trigger<typeof helloWorldTask>(
"hello-world",
"James"
);
export async function loader() {
const handle = await tasks.trigger<typeof helloWorldTask>("hello-world", "James");

return new Response(JSON.stringify(handle), {
headers: { "Content-Type": "application/json" },
});
return new Response(JSON.stringify(handle), {
headers: { "Content-Type": "application/json" },
});
}
```

Expand All @@ -74,13 +71,14 @@ For more information on authenticating with Trigger.dev, see the [API keys page]

</Steps>

<AddEnvironmentVariables/>
<AddEnvironmentVariables />

<DeployingYourTask/>
<DeployingYourTask />

## Deploying to Vercel Edge Functions

Before we start, it's important to note that:

- We'll be using a type-only import for the task to ensure compatibility with the edge runtime.
- The `@trigger.dev/sdk/v3` package supports the edge runtime out of the box.

Expand All @@ -104,10 +102,7 @@ export const config = {
export async function action({ request }: { request: Request }) {
// This is where you'd authenticate the request
const payload = await request.json();
const handle = await tasks.trigger<typeof helloWorldTask>(
"hello-world",
payload
);
const handle = await tasks.trigger<typeof helloWorldTask>("hello-world", payload);
return new Response(JSON.stringify(handle), {
headers: { "Content-Type": "application/json" },
});
Expand Down Expand Up @@ -155,7 +150,6 @@ Push your code to a Git repository and create a new project in the Vercel dashbo

</Step>


<Step title="Add your Vercel environment variables">

In the Vercel project settings, add your Trigger.dev secret key:
Expand All @@ -174,7 +168,10 @@ You can find this key in the Trigger.dev dashboard under API Keys and select the

Once you've added the environment variable, deploy your project to Vercel.

<Note>Ensure you have also deployed your Trigger.dev task. See [deploy your task step](/guides/frameworks/remix#deploying-your-task-to-trigger-dev).</Note>
<Note>
Ensure you have also deployed your Trigger.dev task. See [deploy your task
step](/guides/frameworks/remix#deploying-your-task-to-trigger-dev).
</Note>

</Step>

Expand All @@ -200,5 +197,14 @@ The `vercel-build` script in `package.json` is specific to Remix projects on Ver

The `runtime: "edge"` configuration in the API route allows for better performance on Vercel's Edge Network.

## Additional resources for Remix

<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>

<UsefulNextSteps />
16 changes: 11 additions & 5 deletions docs/guides/frameworks/webhooks-guides-overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,15 @@ A webhook handler is code that executes in response to an event. They can be end
>
How to create a webhook handler in a Remix app, and trigger a task from it.
</Card>
<Card title="Stripe webhooks" icon="webhook" href="/guides/examples/stripe-webhook">
How to create a Stripe webhook handler and trigger a task when a 'checkout session completed'
event is received.
</Card>
<Card
title="Supabase database webhooks guide"
icon="webhook"
href="/guides/frameworks/supabase-edge-functions-database-webhooks"
>
Learn how to trigger a task from a Supabase edge function when an event occurs in your database.
</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>
22 changes: 14 additions & 8 deletions docs/guides/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,15 @@ 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-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 |
| Guide | Description |
| :----------------------------------------------------------------------------------------- | :------------------------------------------------ |
| [Prisma](/guides/frameworks/prisma) | How to setup Prisma with Trigger.dev |
| [Sequin database triggers](/guides/frameworks/sequin) | Trigger tasks from database changes using Sequin |
| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic) | Trigger tasks from Supabase edge function |
| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | Trigger tasks using Supabase database webhooks |
| [Using webhooks in Next.js](/guides/frameworks/nextjs-webhooks) | Trigger tasks from a webhook in Next.js |
| [Using webhooks in Remix](/guides/frameworks/remix-webhooks) | Trigger tasks from a webhook in Remix |
| [Stripe webhooks](/guides/examples/stripe-webhook) | Trigger tasks from incoming Stripe webhook events |

## Example tasks

Expand All @@ -47,7 +49,11 @@ Tasks you can copy and paste to get started with Trigger.dev. They can all be ex
| [Puppeteer](/guides/examples/puppeteer) | Use Puppeteer to generate a PDF or scrape a webpage. |
| [Resend email sequence](/guides/examples/resend-email-sequence) | Send a sequence of emails over several days using Resend with Trigger.dev. |
| [Sharp image processing](/guides/examples/sharp-image-processing) | Use Sharp to process an image and save it to Cloudflare R2. |
| [Stripe webhook](/guides/examples/stripe-webhook) | Trigger a task from Stripe webhook events. |
| [Supabase database operations](/guides/examples/supabase-database-operations) | Run basic CRUD operations on a table in a Supabase database using Trigger.dev. |
| [Supabase Storage upload](/guides/examples/supabase-storage-upload) | Download a video from a URL and upload it to Supabase Storage using S3. |
| [Vercel AI SDK](/guides/examples/vercel-ai-sdk) | Use Vercel AI SDK to generate text using OpenAI. |

<Note>
If you would like to see a guide for your framework, or an example task for your use case, please
request it in our [Discord server](https://trigger.dev/discord) and we'll add it to the list.
</Note>
4 changes: 2 additions & 2 deletions docs/mint.json
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,8 @@
"pages": [
"guides/frameworks/webhooks-guides-overview",
"guides/frameworks/nextjs-webhooks",
"guides/frameworks/remix-webhooks"
"guides/frameworks/remix-webhooks",
"guides/examples/stripe-webhook"
]
}
]
Expand All @@ -308,7 +309,6 @@
"guides/examples/pdf-to-image",
"guides/examples/puppeteer",
"guides/examples/sharp-image-processing",
"guides/examples/stripe-webhook",
"guides/examples/supabase-database-operations",
"guides/examples/supabase-storage-upload",
"guides/examples/react-pdf",
Expand Down