## Install Required Packages

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

<CodeGroup>

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

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

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

</CodeGroup>

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

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

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

```typescript 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](https://docs.astro.build/en/guides/server-side-rendering/).

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

<CodeGroup>

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

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

</CodeGroup>

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

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

```json
"trigger.dev": {
  "endpointId": "my-astro-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-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:

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

<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 --port 4321
```

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

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

</CodeGroup>
<br />
<Note>
  Astro by default runs on port 4321.
</Note>
<Note>
  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`.
</Note>

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