James Ritchie
fade22015f
* Adds new features table to top of v4 upgrade guide * Adds wait idempotency to wait-until, wait-for, and wait-for-token pages * Adds new priority docs page and updates the v4 upgrade guide * Adds new task lifecycle hooks * Removes the message about requiring tasks to be exported * Adds new global lifecycle hooks section * Moves sections from upgrade guide into the table * Adds hidden task page * Improves the global lifecycle hooks section * Updates middleware and locals section * Adds new useWaitToken page to the react hooks section * Adds a new ai.tool section * Moves Docker (legacy) page into self-hosting section * Removes known issues from v4 upgrade guide * Replace “toolTask” with “ai.tool” in the Streams page example * Renames guide to “Migrating from v3” and adds redirect * Remove references to v4 * Removes changelog from migration guide * The installation guide now references `@latest update` * Changes all references from `/sdk/v3` to `/sdk` * Updates @v4-beta to @latest * Fixed broken link * Fixes broken link * Adds an upgrade to v4 using AI section * Fixes 2 broken links * Adds an entry for targetting preview branches * Updates the run statuses * Adds boolean helpers section to the runs and realtime pages * Updates the concurrency page * Updates the test page to include the new options * Adds SDK and curl options for the preview branch targeting * Updates new bulk actions page * Remove the releasing concurrency section * Got rid of some more @v4-beta mentions * Improved rate limit docs * Improved migrating docs * Removed commented sections of the docs * useWaitToken hook * Fixed the description * Fix for missing test image --------- Co-authored-by: Matt Aitken <matt@mattaitken.com> Co-authored-by: Dan <8297864+D-K-P@users.noreply.github.com>
118 lines
3.1 KiB
Plaintext
118 lines
3.1 KiB
Plaintext
---
|
|
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.
|
|
|
|
## GitHub repo
|
|
|
|
<Card
|
|
title="View the project on GitHub"
|
|
icon="GitHub"
|
|
href="https://github.com/triggerdotdev/examples/tree/main/remix-webhooks"
|
|
>
|
|
Click here to view the full code for this project in our examples repository on GitHub. You can
|
|
fork it and use it as a starting point for your own project.
|
|
</Card>
|
|
|
|
## 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";
|
|
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>
|