Remix setup guide

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

Initial setup

Set your secret key locally

Set your TRIGGER_SECRET_KEY environment variable in your .env file. This key is used to authenticate with Trigger.dev, so you can trigger runs from your Remix app. Visit the API Keys page in the dashboard and select the DEV secret key.

For more information on authenticating with Trigger.dev, see the API keys page.

Triggering your task in Remix

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.

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

import type { helloWorldTask } from "../../src/trigger/example";
import { tasks } from "@trigger.dev/sdk";

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" },
  });
}

<TriggerTaskRemix/>

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 package supports the edge runtime out of the box.

There are a few extra steps to follow to deploy your /api/hello-world API endpoint to Vercel Edge Functions.

Update your API route to use the runtime: "edge" option and change it to an action() so we can trigger the task from a curl request later on.

import { tasks } from "@trigger.dev/sdk";
import type { helloWorldTask } from "../../src/trigger/example";
//      👆 **type-only** import

// include this at the top of your API route file
export const config = {
  runtime: "edge",
};
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);
  return new Response(JSON.stringify(handle), {
    headers: { "Content-Type": "application/json" },
  });
}

Create or update the vercel.json file with the following:

{
  "buildCommand": "npm run vercel-build",
  "devCommand": "npm run dev",
  "framework": "remix",
  "installCommand": "npm install",
  "outputDirectory": "build/client"
}

Update your package.json to include the following scripts:

"scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc",
    "vercel-build": "remix vite:build && cp -r ./public ./build/client"
},

Push your code to a Git repository and create a new project in the Vercel dashboard. Select your repository and follow the prompts to complete the deployment.

In the Vercel project settings, add your Trigger.dev secret key:

TRIGGER_SECRET_KEY=your-secret-key

You can find this key in the Trigger.dev dashboard under API Keys and select the environment key you want to use.

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

After deployment, you can test your task in production by running this curl command:

curl -X POST https://your-app.vercel.app/api/hello-world \
-H "Content-Type: application/json" \
-d '{"name": "James"}'

This sends a POST request to your API endpoint with a JSON payload.

Additional notes

The vercel-build script in package.json is specific to Remix projects on Vercel, ensuring that static assets are correctly copied to the build output.

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

Realtime updates with React hooks

The @trigger.dev/react-hooks package lets you subscribe to task runs from your React components. Show progress bars, stream AI responses, or display run status in real time.

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>