Skip to content

Commit cd70a29

Browse files
ericallamericallam
committed
Improve the Astro manual setup guide
1 parent cd94d8f commit cd70a29

File tree

1 file changed

+61
-93
lines changed

1 file changed

+61
-93
lines changed

‎docs/_snippets/manual-setup-astro.mdx

Lines changed: 61 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ To begin, install the necessary packages in your Astro project directory. You ca
55
<CodeGroup>
66

77
```bash npm
8-
npm i @trigger.dev/sdk @trigger.dev/astro
8+
npm i @trigger.dev/sdk@latest @trigger.dev/astro@latest
99
```
1010

1111
```bash pnpm
12-
pnpm install @trigger.dev/sdk @trigger.dev/astro
12+
pnpm install @trigger.dev/sdk@latest @trigger.dev/astro@latest
1313
```
1414

1515
```bash yarn
16-
yarn add @trigger.dev/sdk @trigger.dev/astro
16+
yarn add @trigger.dev/sdk@latest @trigger.dev/astro@latest
1717
```
1818

1919
</CodeGroup>
@@ -32,67 +32,32 @@ Create a `.env` file at the root of your project and include your Trigger API ke
3232

3333
```bash
3434
TRIGGER_API_KEY=ENTER_YOUR_DEVELOPMENT_API_KEY_HERE
35-
TRIGGER_API_URL=https://cloud.trigger.dev
35+
TRIGGER_API_URL=https://api.trigger.dev # this is only necessary if you are self-hosting
3636
```
3737

3838
Replace `ENTER_YOUR_DEVELOPMENT_API_KEY_HERE` with the actual API key obtained from the previous step.
3939

4040
## Configuring the Trigger Client
4141

42-
To set up the Trigger Client for your project, follow these steps:
42+
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.
4343

44-
1. **Create Configuration File:**
44+
Next, add the following code to the file which creates and exports a new `TriggerClient`:
4545

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`).
46+
```typescript src/trigger.ts
47+
import { TriggerClient } from "@trigger.dev/sdk";
4748

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: import.meta.env.TRIGGER_API_KEY,
64-
apiUrl: import.meta.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-
```
49+
export const client = new TriggerClient({
50+
id: "my-astro-app",
51+
apiKey: import.meta.env.TRIGGER_API_KEY,
52+
apiUrl: import.meta.env.TRIGGER_API_URL,
53+
});
54+
```
9055

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.
56+
Replace **"my-astro-app"** with an appropriate identifier for your project.
9257

93-
## Update the astro.config file to enable ssr
58+
## Update the astro.config file to enable SSR (Server Side Rendering)
9459

95-
- You need to enable ssr to use API endpoints (which are required by Trigger.dev).
60+
- You need to enable SSR to use API endpoints (which are required by Trigger.dev).
9661

9762
```typescript astro.config.mjs
9863
import { defineConfig } from "astro/config";
@@ -103,37 +68,18 @@ export default defineConfig({
10368
});
10469
```
10570

106-
[Read the full Astro docs on SSR](https://docs.astro.build/en/guides/server-side-rendering/).
71+
To learn more about SSR, head over to the [Astro docs on SSR](https://docs.astro.build/en/guides/server-side-rendering/).
10772

108-
## Creating the API Route
109-
110-
To establish an API route for interacting with Trigger.dev, follow these steps based on your project's file type and structure
111-
112-
1. Create a new file named `trigger.(ts/js)` within the `pages/api/` directory.
113-
2. Add the following code to `trigger.(ts/js)`:
114-
115-
```typescript src/pages/api/trigger.(ts/js)
116-
import { createAstroRoute } from "@trigger.dev/astro";
117-
//you may need to update this path to point at your trigger.ts file
118-
import { client } from "../../trigger";
119-
120-
//import your jobs, this could be different depending on your project structure
121-
import "../../jobs";
122-
123-
export const prerender = false;
124-
export const { POST } = createAstroRoute(client);
125-
```
73+
## Creating an Example Job
12674

127-
## Creating the Example Job
128-
129-
1. Create a folder named `Jobs` alongside your `pages` directory
130-
2. Inside the `Jobs` folder, add two files named `example.(ts/js)` and `index.(ts/js)`.
75+
1. Create a folder named `jobs` alongside your `pages` directory
76+
2. Inside the `jobs` folder, add two files named `example.ts` and `index.ts`.
13177

13278
<CodeGroup>
13379

134-
```typescript src/jobs/example.(ts/js)
80+
```typescript src/jobs/example.ts
13581
import { eventTrigger } from "@trigger.dev/sdk";
136-
import { client } from "@/trigger";
82+
import { client } from "../trigger";
13783

13884
// your first job
13985
client.defineJob({
@@ -153,24 +99,30 @@ client.defineJob({
15399
});
154100
```
155101

156-
```typescript src/jobs/index.(ts/js)
102+
```typescript src/jobs/index.ts
157103
// export all your job files here
158104
export * from "./example";
159105
```
160106

161107
</CodeGroup>
162108

163-
## Additonal Job Definitions
109+
## Creating the API Route
164110

165-
You can define more job definitions by creating additional files in the `Jobs` folder and exporting them in `index` file.
111+
To establish an API route for interacting with Trigger.dev, follow these steps based on your project's file type and structure
166112

167-
For example, in `index.(ts/js)`, you can export other job files like this:
113+
1. Create a new file named `trigger.ts` within the `pages/api/` directory.
114+
2. Add the following code to `trigger.ts`:
168115

169-
```typescript
170-
// import all your job files here
116+
```typescript src/pages/api/trigger.ts
117+
import { createAstroRoute } from "@trigger.dev/astro";
118+
//you may need to update this path to point at your trigger.ts file
119+
import { client } from "../../trigger";
171120

172-
export * from "./examples";
173-
export * from "./other-job-file";
121+
//import your jobs, this could be different depending on your project structure
122+
import "../../jobs";
123+
124+
export const prerender = false;
125+
export const { POST } = createAstroRoute(client);
174126
```
175127

176128
## Adding Configuration to `package.json`
@@ -179,7 +131,7 @@ Inside the `package.json` file, add the following configuration under the root o
179131

180132
```json
181133
"trigger.dev": {
182-
"endpointId": "my-app"
134+
"endpointId": "my-astro-app"
183135
}
184136
```
185137

@@ -193,12 +145,25 @@ Your `package.json` file might look something like this:
193145
// ... other dependencies
194146
},
195147
"trigger.dev": {
196-
"endpointId": "my-app"
148+
"endpointId": "my-astro-app"
197149
}
198150
}
199151
```
200152

201-
Replace **"my-app"** with the appropriate identifier you used during the step for creating the Trigger Client.
153+
Replace **"my-astro-app"** with the appropriate identifier you used during the step for creating the `TriggerClient`.
154+
155+
## Additonal Job Definitions
156+
157+
You can define more job definitions by creating additional files in the `jobs` folder and exporting them in `index` file.
158+
159+
For example, in `index.ts`, you can export other job files like this:
160+
161+
```typescript
162+
// import all your job files here
163+
164+
export * from "./examples";
165+
export * from "./other-job-file";
166+
```
202167

203168
## Running
204169

@@ -229,24 +194,27 @@ In a **_separate terminal window or tab_** run:
229194
<CodeGroup>
230195

231196
```bash npm
232-
npx @trigger.dev/cli@latest dev
197+
npx @trigger.dev/cli@latest dev --port 4321
233198
```
234199

235200
```bash pnpm
236-
pnpm dlx @trigger.dev/cli@latest dev
201+
pnpm dlx @trigger.dev/cli@latest dev --port 4321
237202
```
238203

239204
```bash yarn
240-
yarn dlx @trigger.dev/cli@latest dev
205+
yarn dlx @trigger.dev/cli@latest dev --port 4321
241206
```
242207

243208
</CodeGroup>
244209
<br />
245210
<Note>
246-
You can optionally pass the port if you're not running on 3000 by adding
247-
`--port 4321` to the end
211+
Astro by default runs on port 4321.
248212
</Note>
249213
<Note>
250214
You can optionally pass the hostname if you're not running on localhost by adding
251215
`--hostname <host>`. Example, in case your Astro app is running on 0.0.0.0: `--hostname 0.0.0.0`.
252216
</Note>
217+
218+
### Next Steps
219+
220+
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.

0 commit comments

Comments
 (0)