How to manually setup Trigger.dev in your Remix project
To begin, install the necessary packages in your Remix project directory. You can choose one of the following package managers:
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_
).
Create a .env
file at the root of your project and include your Trigger API key and URL like this:
Replace ENTER_YOUR_DEVELOPMENT_API_KEY_HERE
with the actual API key obtained from the previous step.
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
:
Replace "my-app" with an appropriate identifier for your project.
To establish an API route for interacting with Trigger.dev, follow these steps based on your project's file type and structure
api.trigger.(ts/js)
within the app/routes/
directory.app/routes/api.trigger.(ts/js)
:jobs
inside your app
directoryjobs
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.
You can define more job definitions by creating additional files in the Jobs
folder, exporting from the file and from the api.trigger route.
package.json
Inside the package.json
file, add the following configuration under the root object:
Your package.json
file might look something like this:
Replace "my-app" with the appropriate project identifier you used during the step for creating the Trigger Client.
Run your Remix app locally, like you normally would. For example:
In a separate terminal window or tab run:
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
.
'TriggerProvider' not found
When running the Remix app, you may see an error like this:
To fix this, edit your remix.config.js
file and add the @trigger.dev/react
package to your list of serverDependenciesToBundle
:
[ERROR] Node builtin "buffer"
When running the Remix app, you may see an error like this:
To fix this, edit your remix.config.js
file and add the browserNodeBuiltinsPolyfill
config:
How to manually setup Trigger.dev in your Remix project
To begin, install the necessary packages in your Remix project directory. You can choose one of the following package managers:
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_
).
Create a .env
file at the root of your project and include your Trigger API key and URL like this:
Replace ENTER_YOUR_DEVELOPMENT_API_KEY_HERE
with the actual API key obtained from the previous step.
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
:
Replace "my-app" with an appropriate identifier for your project.
To establish an API route for interacting with Trigger.dev, follow these steps based on your project's file type and structure
api.trigger.(ts/js)
within the app/routes/
directory.app/routes/api.trigger.(ts/js)
:jobs
inside your app
directoryjobs
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.
You can define more job definitions by creating additional files in the Jobs
folder, exporting from the file and from the api.trigger route.
package.json
Inside the package.json
file, add the following configuration under the root object:
Your package.json
file might look something like this:
Replace "my-app" with the appropriate project identifier you used during the step for creating the Trigger Client.
Run your Remix app locally, like you normally would. For example:
In a separate terminal window or tab run:
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
.
'TriggerProvider' not found
When running the Remix app, you may see an error like this:
To fix this, edit your remix.config.js
file and add the @trigger.dev/react
package to your list of serverDependenciesToBundle
:
[ERROR] Node builtin "buffer"
When running the Remix app, you may see an error like this:
To fix this, edit your remix.config.js
file and add the browserNodeBuiltinsPolyfill
config: