## Installing Required Packages

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

<CodeGroup>

```bash npm
npm i @trigger.dev/sdk @trigger.dev/sveltekit
```

```bash pnpm
pnpm install @trigger.dev/sdk @trigger.dev/sveltekit
```

```bash yarn
yarn add @trigger.dev/sdk @trigger.dev/sveltekit
```

</CodeGroup>
<br />

<Note>Ensure that you execute this command within a SvelteKit project.</Note>
## Obtaining the Development API Key

To locate your development 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 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.

## Syncing Environment Variable types (TypeScript)

You will have type errors for your environment variables unless you run this command:

```sh
npx svelte-kit sync
```

## Configuring the Trigger Client

Create a file at `<root>/src/trigger.ts` or `<root>/trigger.ts` depending on whether you're using the `src` directory or not. `<root>` represents the root directory of your project.

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

```typescript src/trigger.(ts/js)
// trigger.ts (for TypeScript) or trigger.js (for JavaScript)

import { TriggerClient } from "@trigger.dev/sdk";
import { TRIGGER_API_KEY, TRIGGER_API_URL } from "$env/static/private";

export const client = new TriggerClient({
  id: "my-app",
  apiKey: TRIGGER_API_KEY,
  apiUrl: 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

Create a new file named `+server.(ts/js)` within the `src/routes/api/trigger` directory, and add the following code:

```typescript
import { createSvelteRoute } from "@trigger.dev/sveltekit";
import { client } from "../../../trigger";

//import all jobs
import "../../../jobs";

// Create the Svelte route handler using the createSvelteRoute function
const svelteRoute = createSvelteRoute(client);

// Define your API route handler
export const POST = svelteRoute.POST;
```

## Creating the Example Job

1. Create a folder named `jobs` alongside your `src` directory
2. Inside the `jobs` folder, add two files named `example.(ts/js)` and `index.(ts/js)`.

<CodeGroup>

```typescript src/jobs/example.(ts/js)
import { eventTrigger } from "@trigger.dev/sdk";
import { client } from "../trigger";

// your first 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!",
    };
  },
});
```

```typescript src/jobs/index.(ts/js)
// export all your job files here
export * from "./example";
```

</CodeGroup>

## Additonal Job Definitions

You can define more job definitions by creating additional files in the `jobs` folder and exporting them in the `src/jobs/index` file.

For example, in `index.(ts/js)`, you can export other job files like this:

```typescript
// export all your job files here
export * from "./example";
export * from "./other-job-file";
```

## 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 identifier you used during the step for creating the Trigger Client.

## Running

### Run your Sveltekit app

Run your Sveltekit app locally. You need to use the `--host` flag to allow the Trigger.dev CLI to connect to your app.

For example:

<CodeGroup>

```bash npm
npm run dev -- --open --host
```

```bash pnpm
pnpm run dev -- --open --host
```

```bash yarn
yarn run dev -- --open --host
```

</CodeGroup>

### Run the CLI 'dev' command

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

<CodeGroup>

```bash npm
npx @trigger.dev/cli@latest dev --port 5173
```

```bash pnpm
pnpm dlx @trigger.dev/cli@latest dev --port 5173
```

```bash yarn
yarn dlx @trigger.dev/cli@latest dev --port 5173
```

</CodeGroup>
<br />
<Note>
  You can optionally pass the port if you're not running on 3000 by adding
  `--port 5173` 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 Sveltekit app is running on 0.0.0.0: `--hostname 0.0.0.0`.
</Note>
