Remix setup guide

The easiest way to get started is to use the CLI. It will add Trigger.dev to your existing project, create a /trigger folder and give you an example task.

Run this command in the root of your project to get started:

It will do a few things:

1. Log you into the CLI if you’re not already logged in.
2. Create a trigger.config.ts file in the root of your project.
3. Ask where you’d like to create the /trigger directory.
4. Create the /trigger directory with an example task, /trigger/example.[ts/js].

Install the “Hello World” example task when prompted. We’ll use this task to test the setup.

The CLI dev command runs a server for your tasks. It watches for changes in your /trigger directory and communicates with the Trigger.dev platform to register your tasks, perform runs, and send data back and forth.

It can also update your @trigger.dev/* packages to prevent version mismatches and failed deploys. You will always be prompted first.

The CLI dev command spits out various useful URLs. Right now we want to visit the Test page

You should see our Example task in the list

Press the “Run test” button

Congratulations, you should see the run page which will live reload showing you the current state of the run.

If you go back to your terminal you’ll see that the dev command also shows the task status and links to the run log.

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

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

Run your Remix app:

Run the dev server from Step 2. of the Initial Setup section above if it’s not already running:

Now visit the URL in your browser to trigger the task. Ensure the port number is the same as the one you’re running your Remix app on. For example, if you’re running your Remix app on port 3000, visit:

http://localhost:3000/api/trigger

You should see the CLI log the task run with a link to view the logs in the dashboard.

Visit the Trigger.dev dashboard to see your run.

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/v3";
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.