Remix

How to manually setup Trigger.dev in your Remix project

Installing Required Packages

To begin, install the necessary packages in your Remix project directory. You can choose one of the following package managers:

npm

npm i @trigger.dev/sdk@latest @trigger.dev/remix@latest

Obtaining the Development Server API Key

To locate your development Server API key, login to the Trigger.dev dashboard and select the Project you want to connect to. Then click on the Environments & API Keys tab in the left menu. You can copy your development Server API Key from the field at the top of this page. (Your development key will start with tr_dev_).

Adding Environment Variables

Create a .env file at the root of your project and include your Trigger API key and URL like this:

TRIGGER_API_KEY=ENTER_YOUR_DEVELOPMENT_API_KEY_HERE
TRIGGER_API_URL=https://api.trigger.dev # this is only necessary if you are self-hosting

Replace ENTER_YOUR_DEVELOPMENT_API_KEY_HERE with the actual API key obtained from the previous step.

Configuring the Trigger Client

Create a file at <root>/app/trigger.ts, where <root> represents the root directory of your project.

Next, add the following code to the file which creates and exports a new TriggerClient:

app/trigger.(ts/js)

// trigger.ts (for TypeScript) or trigger.js (for JavaScript)

import { TriggerClient } from "@trigger.dev/sdk";

export const client = new TriggerClient({
  id: "my-app",
  apiKey: process.env.TRIGGER_API_KEY,
  apiUrl: process.env.TRIGGER_API_URL,
});

Replace "my-app" with an appropriate identifier for your project.

Creating the API Route

To establish an API route for interacting with Trigger.dev, follow these steps based on your project's file type and structure

1. Create a new file named api.trigger.(ts/js) within the app/routes/ directory.
2. Add the following code to app/routes/api.trigger.(ts/js):

app/routes/api.trigger.(ts/js)

import { createRemixRoute } from "@trigger.dev/remix";
import { client } from "~/trigger";

// Remix will automatically strip files with side effects
// So you need to *export* your Job definitions like this:
export * from "~/jobs/example.server";

export const { action } = createRemixRoute(client);

Creating the Example Job

1. Create a folder named jobs inside your app directory
2. Inside the jobs folder, add a file named example.server.(ts/js).

.server files are guaranteed to be excluded from the client-side build, so you can safely import server-only dependencies here.

app/jobs/example.server.(ts/js)

import { eventTrigger } from "@trigger.dev/sdk";
import { client } from "~/trigger";

// your first job
export const job = client.defineJob({
  id: "example-job",
  name: "Example Job",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "example.event",
  }),
  run: async (payload, io, ctx) => {
    await io.logger.info("Hello world!", { payload });

    return {
      message: "Hello world!",
    };
  },
});

Additional Job Definitions

You can define more job definitions by creating additional files in the Jobs folder, exporting from the file and from the api.trigger route.

Adding Configuration to package.json

Inside the package.json file, add the following configuration under the root object:

"trigger.dev": {
  "endpointId": "my-app"
}

Your package.json file might look something like this:

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    // ... other dependencies
  },
  "trigger.dev": {
    "endpointId": "my-app"
  }
}

Replace "my-app" with the appropriate project identifier you used during the step for creating the Trigger Client.

Running

Run your Remix app

Run your Remix app locally, like you normally would. For example:

npm

npm run dev

Run the CLI 'dev' command

In a separate terminal window or tab run:

npm

npx @trigger.dev/cli@latest dev

You can optionally pass the port if you're not running on 3000 by adding --port 3001 to the end

You can optionally pass the hostname if you're not running on localhost by adding --hostname <host>. Example, in case your Remix is running on 0.0.0.0: --hostname 0.0.0.0.

Troubleshooting

'TriggerProvider' not found

When running the Remix app, you may see an error like this:

import { TriggerProvider } from "@trigger.dev/react";
         ^^^^^^^^^^^^^^^
SyntaxError: Named export 'TriggerProvider' not found. The requested module '@trigger.dev/react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@trigger.dev/react';
const { TriggerProvider } = pkg;

To fix this, edit your remix.config.js file and add the @trigger.dev/react package to your list of serverDependenciesToBundle:

export default {
  // ... other config
  serverDependenciesToBundle: ["@trigger.dev/react"],
};

[ERROR] Node builtin "buffer"

When running the Remix app, you may see an error like this:

✘ [ERROR] Node builtin "buffer" (imported by "node_modules/@trigger.dev/core/dist/index.js") must be polyfilled for the browser.
You can enable this polyfill in your Remix config, e.g. `browserNodeBuiltinsPolyfill: { modules: { buffer: true } }`
[plugin browser-node-builtins-polyfill-plugin]

To fix this, edit your remix.config.js file and add the browserNodeBuiltinsPolyfill config:

export default {
  browserNodeBuiltinsPolyfill: {
    modules: {
      buffer: "empty",
    },
  },
};