SvelteKit

How to manually setup Trigger.dev in your SvelteKit project

Installing Required Packages

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

npm

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

Ensure that you execute this command within a SvelteKit project.

Obtaining the Development API Key

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

Syncing Environment Variable types (TypeScript)

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

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:

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:

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

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

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:

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

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

npm

npm run dev -- --open --host

Run the CLI 'dev' command

In a separate terminal window or tab run:

npm

npx @trigger.dev/cli@latest dev --port 5173

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

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.