## Installing Required Packages

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

<CodeGroup>

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

```bash pnpm
pnpm install @trigger.dev/sdk@latest @trigger.dev/remix@latest
```

```bash yarn
yarn add @trigger.dev/sdk@latest @trigger.dev/remix@latest
```

</CodeGroup>

## Obtaining the Development Server API Key

To locate your development Server API key, login to the [Trigger.dev
dashboard](https://cloud.trigger.dev) 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:

```bash
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`:

```typescript 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)`:

```typescript 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.

<CodeGroup>

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

</CodeGroup>

## 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:

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

Your `package.json` file might look something like this:

```json
{
  "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:

<CodeGroup>

```bash npm
npm run dev
```

```bash pnpm
pnpm run dev
```

```bash yarn
yarn run dev
```

</CodeGroup>

### Run the CLI 'dev' command

In a **_separate terminal window or tab_** run:

<CodeGroup>

```bash npm
npx @trigger.dev/cli@latest dev
```

```bash pnpm
pnpm dlx @trigger.dev/cli@latest dev
```

```bash yarn
yarn dlx @trigger.dev/cli@latest dev
```

</CodeGroup>
<br />
<Note>
  You can optionally pass the port if you're not running on 3000 by adding
  `--port 3001` to the end
</Note>

<Note>
  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`.
</Note>
