Skip to content

Updated guides intro and side menu #1398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 10, 2024
Merged
Show file tree
Hide file tree
Changes from all 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>
23 changes: 14 additions & 9 deletions docs/guides/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,21 @@ import CardSupabase from "/snippets/card-supabase.mdx";
<CardNodejs />
<CardNextjs />
<CardRemix />
<CardSupabase />
</CardGroup>

## Guides

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 +48,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