Astro

How to manually setup Trigger.dev in your Astro project

Install Required Packages

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

npm

npm i @trigger.dev/sdk@latest @trigger.dev/astro@latest

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.

Configuring the Trigger Client

Create a file at <root>/trigger.ts or <root>/src/trigger.ts, depending on if your project uses a src directory, where <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

import { TriggerClient } from "@trigger.dev/sdk";

export const client = new TriggerClient({
  id: "my-astro-app",
  apiKey: import.meta.env.TRIGGER_API_KEY,
  apiUrl: import.meta.env.TRIGGER_API_URL,
});

Replace "my-astro-app" with an appropriate identifier for your project.

Update the astro.config file to enable SSR (Server Side Rendering)

• You need to enable SSR to use API endpoints (which are required by Trigger.dev).

astro.config.mjs

import { defineConfig } from "astro/config";

export default defineConfig({
  //alternatively you can use "hybrid" instead of "server"
  output: "server",
});

To learn more about SSR, head over to the Astro docs on SSR.

Creating an Example Job

1. Create a folder named jobs alongside your pages directory
2. Inside the jobs folder, add two files named example.ts and index.ts.

src/jobs/example.ts

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

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 trigger.ts within the pages/api/ directory.
2. Add the following code to trigger.ts:

src/pages/api/trigger.ts

import { createAstroRoute } from "@trigger.dev/astro";
//you may need to update this path to point at your trigger.ts file
import { client } from "../../trigger";

//import your jobs, this could be different depending on your project structure
import "../../jobs";

export const prerender = false;
export const { POST } = createAstroRoute(client);

Adding Configuration to package.json

Inside the package.json file, add the following configuration under the root object:

"trigger.dev": {
  "endpointId": "my-astro-app"
}

Your package.json file might look something like this:

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    // ... other dependencies
  },
  "trigger.dev": {
    "endpointId": "my-astro-app"
  }
}

Replace "my-astro-app" with the appropriate identifier you used during the step for creating the TriggerClient.

Additonal Job Definitions

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

For example, in index.ts, you can export other job files like this:

// import all your job files here

export * from "./examples";
export * from "./other-job-file";

Running

Run your Astro app

Run your Astro app locally, like you normally would. For example:

npm

npm run dev

Run the CLI 'dev' command

In a separate terminal window or tab run:

npm

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

Astro by default runs on port 4321.

You can optionally pass the hostname if you're not running on localhost by adding --hostname <host>. Example, in case your Astro app is running on 0.0.0.0: --hostname 0.0.0.0.

Next Steps

You should now see your example job in the Trigger.dev dashboard. You can now create additional jobs and use the Trigger.dev dashboard to test them.