Triggering tasks with webhooks in Remix

Learn how to trigger a task from a webhook in a Remix app.

Prerequisites

• A Remix project, set up with Trigger.dev
• cURL 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:

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

1. Run your Remix app and the Trigger.dev dev server

   First, run your Remix app.

   npm

   npm run dev
   

   Then, open up a second terminal window and start the Trigger.dev dev server:

   npm

   npx trigger.dev@latest dev
   
2. 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:

   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.

   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.

3. 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, 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"}.