SvelteKit Quick Start

​

Installing Required Packages

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

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

​

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:

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

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 run dev -- --open --host

​

Run the CLI 'dev' command

In a separate terminal window or tab run:

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