|
1 | | -We're in the process of building support for the Astro framework. You can follow along with progress or contribute via [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues). |
| 1 | +## Install Required Packages |
| 2 | + |
| 3 | +To begin, install the necessary packages in your Astro project directory. You can choose one of the following package managers: |
| 4 | + |
| 5 | +<CodeGroup> |
| 6 | + |
| 7 | +```bash npm |
| 8 | +npm i @trigger.dev/sdk @trigger.dev/astro |
| 9 | +``` |
| 10 | + |
| 11 | +```bash pnpm |
| 12 | +pnpm install @trigger.dev/sdk @trigger.dev/astro |
| 13 | +``` |
| 14 | + |
| 15 | +```bash yarn |
| 16 | +yarn add @trigger.dev/sdk @trigger.dev/astro |
| 17 | +``` |
| 18 | + |
| 19 | +</CodeGroup> |
| 20 | + |
| 21 | +## Obtaining the Development API Key |
| 22 | + |
| 23 | +To locate your development API key, login to the [Trigger.dev |
| 24 | +dashboard](https://cloud.trigger.dev) and select the Project you want to |
| 25 | +connect to. Then click on the Environments & API Keys tab in the left menu. |
| 26 | +You can copy your development API Key from the field at the top of this page. |
| 27 | +(Your development key will start with `tr_dev_`). |
| 28 | + |
| 29 | +## Adding Environment Variables |
| 30 | + |
| 31 | +Create a `.env` file at the root of your project and include your Trigger API key and URL like this: |
| 32 | + |
| 33 | +```bash |
| 34 | +TRIGGER_API_KEY=ENTER_YOUR_DEVELOPMENT_API_KEY_HERE |
| 35 | +TRIGGER_API_URL=https://cloud.trigger.dev |
| 36 | +``` |
| 37 | + |
| 38 | +Replace `ENTER_YOUR_DEVELOPMENT_API_KEY_HERE` with the actual API key obtained from the previous step. |
| 39 | + |
| 40 | +## Configuring the Trigger Client |
| 41 | + |
| 42 | +To set up the Trigger Client for your project, follow these steps: |
| 43 | + |
| 44 | +1. **Create Configuration File:** |
| 45 | + |
| 46 | + In your project directory, create a configuration file named `trigger.ts` or `trigger.js`, depending on whether your project uses TypeScript (`.ts`) or JavaScript (`.js`). |
| 47 | + |
| 48 | +2. **Choose Directory:** |
| 49 | + |
| 50 | + Depending on your project structure, choose the appropriate directory for the configuration file. If your project uses a `src` directory, create the file within it or Otherwise, create it directly in the project root. |
| 51 | + |
| 52 | +3. **Add Configuration Code:** |
| 53 | + |
| 54 | + Open the configuration file you created and add the following code: |
| 55 | + |
| 56 | + ```typescript src/trigger.(ts/js) |
| 57 | + // trigger.ts (for TypeScript) or trigger.js (for JavaScript) |
| 58 | + |
| 59 | + import { TriggerClient } from "@trigger.dev/sdk"; |
| 60 | + |
| 61 | + export const client = new TriggerClient({ |
| 62 | + id: "my-app", |
| 63 | + apiKey: process.env.TRIGGER_API_KEY, |
| 64 | + apiUrl: process.env.TRIGGER_API_URL, |
| 65 | + }); |
| 66 | + ``` |
| 67 | + |
| 68 | + Replace **"my-app"** with an appropriate identifier for your project. The **apiKey** and **apiUrl** are obtained from the environment variables you set earlier. |
| 69 | + |
| 70 | +4. **File Location:** |
| 71 | + |
| 72 | + - You can save the file within the **src** directory or in the project rooot. |
| 73 | + |
| 74 | + **Example Directory Structure with src:** |
| 75 | + |
| 76 | + ``` |
| 77 | + project-root/ |
| 78 | + ├── src/ |
| 79 | + ├── trigger.ts |
| 80 | + ├── other files... |
| 81 | + ``` |
| 82 | + |
| 83 | + **Example Directory Structure without src:** |
| 84 | + |
| 85 | + ``` |
| 86 | + project-root/ |
| 87 | + ├── trigger.ts |
| 88 | + ├── other files... |
| 89 | + ``` |
| 90 | + |
| 91 | +By following these steps, you'll configure the Trigger Client to work with your project, regardless of whether you have a separate **src** directory and whether you're using TypeScript or JavaScript files. |
| 92 | + |
| 93 | +## update the astro.config file to enable ssr |
| 94 | + |
| 95 | +- You need to enable ssr to use API endpoints that would be in the `pages/api` folder |
| 96 | + |
| 97 | +```typescript astro.config.mjs |
| 98 | +import { defineConfig } from "astro/config"; |
| 99 | + |
| 100 | +export default defineConfig({ |
| 101 | + output: "server", |
| 102 | +}); |
| 103 | +``` |
| 104 | + |
| 105 | +## Creating the API Route |
| 106 | + |
| 107 | +To establish an API route for interacting with Trigger.dev, follow these steps based on your project's file type and structure |
| 108 | + |
| 109 | +1. Create a new file named `trigger.(ts/js)` within the `pages/api/` directory. |
| 110 | +2. Add the following code to `trigger.(ts/js)`: |
| 111 | + |
| 112 | +```typescript api/trigger.ts/js |
| 113 | +import { createAstroRoute } from "@trigger.dev/astro"; |
| 114 | +import { client } from "@/trigger"; |
| 115 | + |
| 116 | +//import your jobs |
| 117 | +import "@/jobs"; |
| 118 | + |
| 119 | +export const { POST } = createAstroRoute(client); |
| 120 | +``` |
| 121 | + |
| 122 | +## Creating the Example Job |
| 123 | + |
| 124 | +1. Create a folder named `Jobs` alongside your `pages` directory |
| 125 | +2. Inside the `Jobs` folder, add two files named `example.(ts/js)` and `index.(ts/js)`. |
| 126 | + |
| 127 | +<CodeGroup> |
| 128 | + |
| 129 | +```typescript example.(ts/js) |
| 130 | +import { eventTrigger } from "@trigger.dev/sdk"; |
| 131 | +import { client } from "@/trigger"; |
| 132 | + |
| 133 | +// your first job |
| 134 | +client.defineJob({ |
| 135 | + id: "example-job", |
| 136 | + name: "Example Job", |
| 137 | + version: "0.0.1", |
| 138 | + trigger: eventTrigger({ |
| 139 | + name: "example.event", |
| 140 | + }), |
| 141 | + run: async (payload, io, ctx) => { |
| 142 | + await io.logger.info("Hello world!", { payload }); |
| 143 | + |
| 144 | + return { |
| 145 | + message: "Hello world!", |
| 146 | + }; |
| 147 | + }, |
| 148 | +}); |
| 149 | +``` |
| 150 | + |
| 151 | +```typescript index.ts/index.(ts/js) |
| 152 | +// import all your job files here |
| 153 | + |
| 154 | +export * from "./examples"; |
| 155 | +``` |
| 156 | + |
| 157 | +</CodeGroup> |
| 158 | + |
| 159 | +## Additonal Job Definitions |
| 160 | + |
| 161 | +You can define more job definitions by creating additional files in the `Jobs` folder and exporting them in `index` file. |
| 162 | + |
| 163 | +For example, in `index.(ts/js)`, you can export other job files like this: |
| 164 | + |
| 165 | +```typescript |
| 166 | +// import all your job files here |
| 167 | + |
| 168 | +export * from "./examples"; |
| 169 | +export * from "./other-job-file"; |
| 170 | +``` |
| 171 | + |
| 172 | +## Adding Configuration to `package.json` |
| 173 | + |
| 174 | +Inside the `package.json` file, add the following configuration under the root object: |
| 175 | + |
| 176 | +```json |
| 177 | +"trigger.dev": { |
| 178 | + "endpointId": "my-app" |
| 179 | +} |
| 180 | +``` |
| 181 | + |
| 182 | +Your `package.json` file might look something like this: |
| 183 | + |
| 184 | +```json |
| 185 | +{ |
| 186 | + "name": "my-app", |
| 187 | + "version": "1.0.0", |
| 188 | + "dependencies": { |
| 189 | + // ... other dependencies |
| 190 | + }, |
| 191 | + "trigger.dev": { |
| 192 | + "endpointId": "my-app" |
| 193 | + } |
| 194 | +} |
| 195 | +``` |
| 196 | + |
| 197 | +Replace **"my-app"** with the appropriate identifier you used during the step for creating the Trigger Client. |
| 198 | + |
| 199 | +## Running |
| 200 | + |
| 201 | +### Run your Astro app |
| 202 | + |
| 203 | +Run your Astro app locally, like you normally would. For example: |
| 204 | + |
| 205 | +<CodeGroup> |
| 206 | + |
| 207 | +```bash npm |
| 208 | +npm run dev |
| 209 | +``` |
| 210 | + |
| 211 | +```bash pnpm |
| 212 | +pnpm run dev |
| 213 | +``` |
| 214 | + |
| 215 | +```bash yarn |
| 216 | +yarn run dev |
| 217 | +``` |
| 218 | + |
| 219 | +</CodeGroup> |
| 220 | + |
| 221 | +### Run the CLI 'dev' command |
| 222 | + |
| 223 | +In a **_separate terminal window or tab_** run: |
| 224 | + |
| 225 | +<CodeGroup> |
| 226 | + |
| 227 | +```bash npm |
| 228 | +npx @trigger.dev/cli@latest dev |
| 229 | +``` |
| 230 | + |
| 231 | +```bash pnpm |
| 232 | +pnpm dlx @trigger.dev/cli@latest dev |
| 233 | +``` |
| 234 | + |
| 235 | +```bash yarn |
| 236 | +yarn dlx @trigger.dev/cli@latest dev |
| 237 | +``` |
| 238 | + |
| 239 | +</CodeGroup> |
| 240 | +<br /> |
| 241 | +<Note> |
| 242 | + You can optionally pass the port if you're not running on 3000 by adding |
| 243 | + `--port 4321` to the end |
| 244 | +</Note> |
| 245 | +<Note> |
| 246 | + You can optionally pass the hostname if you're not running on localhost by adding |
| 247 | + `--hostname <host>`. Example, in case your Astro app is running on 0.0.0.0: `--hostname 0.0.0.0`. |
| 248 | +</Note> |
0 commit comments