​
Prerequisites

​
Initial setup

1

Run the CLI `init` command

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

Run the CLI `dev` command

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

Perform a test run using the dashboard

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 , select it. Most tasks have a “payload” which you enter in the JSON editor , but our example task doesn’t need any input.Press the “Run test” button .Test page
4

View your run

Congratulations, you should see the run page which will live reload showing you the current state of the run.Run pageIf you go back to your terminal you’ll see that the dev command also shows the task status and links to the run log.Terminal showing completed run

​
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. How to find your secret key For more information on authenticating with Trigger.dev, see the API keys page.

​
Triggering your task in Remix

1

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

Add your task

Add this code to your api.hello-world.ts file which imports your task:
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");

  return new Response(JSON.stringify(handle), {
    headers: { "Content-Type": "application/json" },
  });
}
3

Trigger your task

Run your Remix app:
npm run dev
Run the dev server from Step 2. of the Initial Setup section above if it’s not already running:
npx trigger.dev@latest dev
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.Trigger.dev CLI showing a successful runVisit the Trigger.dev dashboard to see your run.

​
Manually add your environment variables (optional)

If you have any environment variables in your tasks, be sure to add them in the dashboard so deployed code runs successfully. In Node.js, these environment variables are accessed in your code using process.env.MY_ENV_VAR. In the sidebar select the “Environment Variables” page, then press the “New environment variable” button. Environment variables page You can add values for your local dev environment, staging and prod. Environment variables page You can also add environment variables in code by following the steps on the Environment Variables page.

​
Deploying your task to Trigger.dev

For this guide, we’ll manually deploy your task by running the CLI deploy command below. Other ways to deploy are listed in the next section. 
npx trigger.dev@latest deploy

​
Other ways to deploy

Use GitHub Actions to automatically deploy your tasks whenever new code is pushed and when the trigger directory has changes in it. Follow this guide to set up GitHub Actions.

​
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.
There are a few extra steps to follow to deploy your /api/hello-world API endpoint to Vercel Edge Functions.
1

Update your API route

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.
app/routes/api.hello-world.ts
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" },
  });
}
2

Update the Vercel configuration

Create or update the vercel.json file with the following:
vercel.json
{
  "buildCommand": "npm run vercel-build",
  "devCommand": "npm run dev",
  "framework": "remix",
  "installCommand": "npm install",
  "outputDirectory": "build/client"
}
3

Update package.json scripts

Update your package.json to include the following scripts:
package.json
"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"
},
4

Deploy to Vercel

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

Add your Vercel environment variables

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.How to find your secret key
6

Deploy your project

Once you’ve added the environment variable, deploy your project to Vercel.
Ensure you have also deployed your Trigger.dev task. See deploy your task step.
7

Test your task in production

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.

​
Additional resources for Remix

Remix - triggering tasks using webhooks

How to create a webhook handler in a Remix app, and trigger a task from it.

​
Useful next steps

Tasks overview

Learn what tasks are and their options

Writing tasks

Learn how to write your own tasks

Deploy using the CLI

Learn how to deploy your task manually using the CLI

Deploy using GitHub actions

Learn how to deploy your task using GitHub actions