You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
CLI now supports multiple frameworks (with tests) (#480)
* Early work defining CLI framework support
* WIP moving CLI init logic to the Framework class
* Installing files should now work for Nextjs
* Some fixes
* WIP creating unit tests for Next.js project detection
* Delete old jest config
* Latest lockfile
* Detect use of src directory test
* Tests for detection pages/app directory
* Correct detection of Next.js project
* Renamed test file
* Create install files from template files with replacements. With tests
* Added multiple uses of the same replacement
* Created a test for the install step (it fails right now with JS)
* Removed unused import
* Another test that should pass but currently fails…
* Path alias fixed and now has tests
* New pathAlias function used
* Nextjs page install tests
* Fixed app directory install (with tests)
* Removed e2e CLI test, switched to unit testing strategy instead
* Latest lockfile
* The install files are now actual files that are copied and transformed
* Got the template files working correctly after building
* Next steps are now framework specific
* createFileFromTemplate now works with a path again. Uses mock if specified.
* Renamed apiRoute.js to pagesApiRoute.js
* Simplified pages file generation
* Next.js app API route template
* Next.js App routing support, with common files logic shared
* Dev command now uses framework default values if they exist and aren’t overridden
* Unused import
* pathAlias now works for all frameworks
* Added a test to detect Next from the next.config.js
* WIP on Remix framework support
* Tests for Remix install
* Replaced references to Next.js
* Use a green ✔️ instead of ✅ in the CLI
* Support for multiple hostnames
* Tunneling can now use the hostname and port
* Work on multiple ports
* Improved the error messages. Added some extra pots to Next.js
* Update the Remix templates to have .server in the imports
* Remix updated to use server-runtime instead of node. Node v18+
* Frameworks can specify the watch paths and ignore paths
* Define the watch variables above, so we can easily log them for debugging
* Don’t wait for outdated package checking when running the dev command
* Improved the Remix manual setup guide
* Rewriting docs for quickstart
* Updated the Next.js quickstart
* Remix quick start
* Added a changeset
* Improved the Next.js manual setup
TRIGGER_API_URL=https://api.trigger.dev# this is only necessary if you are self-hosting
36
36
```
37
37
38
38
Replace `ENTER_YOUR_DEVELOPMENT_API_KEY_HERE` with the actual API key obtained from the previous step.
39
39
40
40
## Configuring the Trigger Client
41
41
42
-
To set up the Trigger Client for your project, follow these steps:
42
+
Create a file at `<root>/app/trigger.ts`, where `<root>` represents the root directory of your project.
43
43
44
-
1.**Create Configuration File:**
44
+
Next, add the following code to the file which creates and exports a new `TriggerClient`:
45
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`).
46
+
```typescript app/trigger.(ts/js)
47
+
// trigger.ts (for TypeScript) or trigger.js (for JavaScript)
47
48
48
-
2.**Choose Directory:**
49
+
import { TriggerClient } from"@trigger.dev/sdk";
49
50
50
-
Create the configuration file inside the **app** directory of your project.
51
-
52
-
3.**Add Configuration Code:**
53
-
54
-
Open the configuration file you created and add the following code:
55
-
56
-
```typescript app/trigger.(ts/js)
57
-
// trigger.ts (for TypeScript) or trigger.js (for JavaScript)
58
-
59
-
import { TriggerClient } from"@trigger.dev/sdk";
60
-
61
-
exportconst client =newTriggerClient({
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.**Example Directory Structure :**
51
+
exportconst client =newTriggerClient({
52
+
id: "my-app",
53
+
apiKey: process.env.TRIGGER_API_KEY,
54
+
apiUrl: process.env.TRIGGER_API_URL,
55
+
});
56
+
```
71
57
72
-
```
73
-
project-root/
74
-
├── app/
75
-
├── routes/
76
-
├── trigger.ts
77
-
├── other files...
78
-
```
58
+
Replace **"my-app"** with an appropriate identifier for your project.
The CLI `dev` command allows the Trigger.dev service to send messages to your site. This is required for registering Jobs, triggering them and running tasks. To achieve this it creates a tunnel (using [ngrok](https://ngrok.com/)) so Trigger.dev can send messages to your machine.
2
+
3
+
You should leave the `dev` command running when you're developing.
4
+
5
+
In a **new terminal window or tab** run:
6
+
7
+
<CodeGroup>
8
+
9
+
```bash npm
10
+
npx @trigger.dev/cli@latest dev
11
+
```
12
+
13
+
```bash pnpm
14
+
pnpm dlx @trigger.dev/cli@latest dev
15
+
```
16
+
17
+
```bash yarn
18
+
yarn dlx @trigger.dev/cli@latest dev
19
+
```
20
+
21
+
</CodeGroup>
22
+
<br />
23
+
<Note>
24
+
You can optionally pass the port if you're not running on the default port by adding
// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline
4
+
client.defineJob({
5
+
// This is the unique identifier for your Job, it must be unique across all Jobs in your project
6
+
id: "example-job",
7
+
name: "Example Job: a joke with a delay",
8
+
version: "0.0.1",
9
+
// This is triggered by an event using eventTrigger. You can also trigger Jobs with webhooks, on schedules, and more: https://trigger.dev/docs/documentation/concepts/triggers/introduction
10
+
trigger: eventTrigger({
11
+
name: "example.event",
12
+
}),
13
+
run: async (payload, io, ctx) => {
14
+
// This logs a message to the console
15
+
awaitio.logger.info("🧪 Example Job: a joke with a delay");
16
+
awaitio.logger.info("How do you comfort a JavaScript bug?");
17
+
// This waits for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year
18
+
awaitio.wait("Wait 5 seconds for the punchline...", 5);
19
+
awaitio.logger.info("You console it! 🤦");
20
+
awaitio.logger.info(
21
+
"✨ Congratulations, You just ran your first successful Trigger.dev Job! ✨"
22
+
);
23
+
// To learn how to write much more complex (and probably funnier) Jobs, check out our docs: https://trigger.dev/docs/documentation/guides/create-a-job
TRIGGER_API_URL=https://api.trigger.dev# this is only necessary if you are self-hosting
62
58
63
59
```
64
60
65
61
Replace `ENTER_YOUR_DEVELOPMENT_API_KEY_HERE` with the actual API key obtained from the previous step.
66
62
67
63
## Configuring the Trigger Client
68
64
69
-
To set up the Trigger Client for your project, follow these steps:
70
-
71
-
1.**Create Configuration File:**
72
-
73
-
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`).
74
-
75
-
2.**Choose Directory:**
76
-
77
-
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. Otherwise, create it directly in the project root.
78
-
79
-
3.**Add Configuration Code:**
65
+
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.
80
66
81
-
Open the configuration file you created and add the following code:
67
+
Next, add the following code to the file which creates and exports a new `TriggerClient`:
82
68
83
-
```typescript
84
-
// trigger.ts (for TypeScript) or trigger.js (for JavaScript)
69
+
```typescript src/trigger.(ts/js)
70
+
// trigger.ts (for TypeScript) or trigger.js (for JavaScript)
85
71
86
-
import { TriggerClient } from"@trigger.dev/sdk";
72
+
import { TriggerClient } from"@trigger.dev/sdk";
87
73
88
-
exportconst client =newTriggerClient({
89
-
id: "my-app",
90
-
apiKey: process.env.TRIGGER_API_KEY,
91
-
apiUrl: process.env.TRIGGER_API_URL,
92
-
});
93
-
```
94
-
95
-
Replace **"my-app"** with an appropriate identifier for your project. The **apiKey** and **apiUrl** are obtained from the environment variables you set earlier.
96
-
97
-
4.**File Location:**
98
-
99
-
Depending on your project structure, save the configuration file in the appropriate location:
100
-
101
-
- If your project uses a **src** directory, save the file within the **src** directory.
102
-
- If your project does not use a **src** directory, save the file in the project root.
103
-
104
-
**Example Directory Structure with src:**
105
-
106
-
```
107
-
project-root/
108
-
├── src/
109
-
├── trigger.ts
110
-
├── other files...
111
-
```
112
-
113
-
**Example Directory Structure without src:**
114
-
115
-
```
116
-
project-root/
117
-
├── trigger.ts
118
-
├── other files...
119
-
```
74
+
exportconst client =newTriggerClient({
75
+
id: "my-app",
76
+
apiKey: process.env.TRIGGER_API_KEY,
77
+
apiUrl: process.env.TRIGGER_API_URL,
78
+
});
79
+
```
120
80
121
-
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.
81
+
Replace **"my-app"**with an appropriate identifier for your project.
122
82
123
83
## Creating the API Route
124
84
@@ -238,18 +198,31 @@ Your `package.json` file might look something like this:
238
198
239
199
Replace **"my-app"** with the appropriate identifier you used during the step for creating the Trigger Client.
240
200
241
-
## Next Steps
201
+
## Running
242
202
243
-
Start your Next.js project locally, and then execute the `dev` CLI command to run Trigger.dev locally. You should run this command every time you want to use Trigger.dev locally.
203
+
### Run your Next.js app
244
204
245
-
205
+
Run your Next.js app locally, like you normally would. For example:
246
206
247
-
<Warning>
248
-
Make sure your Next.js site is running locally before continuing. You must also leave this `dev`
249
-
terminal command running while you develop.
250
-
</Warning>
207
+
<CodeGroup>
251
208
252
-
In a **new terminal window or tab** run:
209
+
```bash npm
210
+
npm run dev
211
+
```
212
+
213
+
```bash pnpm
214
+
pnpm run dev
215
+
```
216
+
217
+
```bash yarn
218
+
yarn run dev
219
+
```
220
+
221
+
</CodeGroup>
222
+
223
+
### Run the CLI 'dev' command
224
+
225
+
In a **_separate terminal window or tab_** run:
253
226
254
227
<CodeGroup>
255
228
@@ -271,9 +244,10 @@ yarn dlx @trigger.dev/cli@latest dev
271
244
You can optionally pass the port if you're not running on 3000 by adding
272
245
`--port 3001` to the end
273
246
</Note>
247
+
274
248
<Note>
275
249
You can optionally pass the hostname if you're not running on localhost by adding
276
-
`--hostname <host>`. Example, in case your Next.js is running on 0.0.0.0: `--hostname 0.0.0.0`.
250
+
`--hostname <host>`. Example, in case your Remix is running on 0.0.0.0: `--hostname 0.0.0.0`.
0 commit comments