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

Author: matt-aitken

.changeset/four-apes-sleep.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/remix": patch
+"@trigger.dev/cli": patch
+---
+
+CLI now supports multiple frameworks (starting with Next.js and Remix)

docs/_snippets/manual-setup-remix.mdx

@@ -32,50 +32,30 @@ Create a `.env` file at the root of your project and include your Trigger API ke
 
 ```bash
 TRIGGER_API_KEY=ENTER_YOUR_DEVELOPMENT_API_KEY_HERE
-TRIGGER_API_URL=https://cloud.trigger.dev
+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
 
-To set up the Trigger Client for your project, follow these steps:
+Create a file at `<root>/app/trigger.ts`, where `<root>` represents the root directory of your project.
 
-1. **Create Configuration File:**
+Next, add the following code to the file which creates and exports a new `TriggerClient`:
 
-   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`).
+```typescript app/trigger.(ts/js)
+// trigger.ts (for TypeScript) or trigger.js (for JavaScript)
 
-2. **Choose Directory:**
+import { TriggerClient } from "@trigger.dev/sdk";
 
-   Create the configuration file inside the **app** directory of your project.
-
-3. **Add Configuration Code:**
-
-   Open the configuration file you created and add the following code:
-
-   ```typescript app/trigger.(ts/js)
-   // trigger.ts (for TypeScript) or trigger.js (for JavaScript)
-
-   import { TriggerClient } from "@trigger.dev/sdk";
-
-   export const client = new TriggerClient({
-     id: "my-app",
-     apiKey: process.env.TRIGGER_API_KEY,
-     apiUrl: process.env.TRIGGER_API_URL,
-   });
-   ```
-
-   Replace **"my-app"** with an appropriate identifier for your project. The **apiKey** and **apiUrl** are obtained from the environment variables you set earlier.
-
-4. **Example Directory Structure :**
+export const client = new TriggerClient({
+  id: "my-app",
+  apiKey: process.env.TRIGGER_API_KEY,
+  apiUrl: process.env.TRIGGER_API_URL,
+});
+```
 
-   ```
-       project-root/
-       ├── app/
-           ├── routes/
-           ├── trigger.ts
-       ├── other files...
-   ```
+Replace **"my-app"** with an appropriate identifier for your project.
 
 ## Creating the API Route
 

docs/_snippets/quickstart-cli-dev.mdx

@@ -0,0 +1,26 @@
+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.
+
+You should leave the `dev` command running when you're developing.
+
+In a **new terminal window or tab** run:
+
+<CodeGroup>
+
+```bash npm
+npx @trigger.dev/cli@latest dev
+```
+
+```bash pnpm
+pnpm dlx @trigger.dev/cli@latest dev
+```
+
+```bash yarn
+yarn dlx @trigger.dev/cli@latest dev
+```
+
+</CodeGroup>
+<br />
+<Note>
+  You can optionally pass the port if you're not running on the default port by adding
+  `--port 3001` to the end.
+</Note>

docs/_snippets/quickstart-example-job.mdx

@@ -0,0 +1,26 @@
+```typescript
+// Your first job
+// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline
+client.defineJob({
+  // This is the unique identifier for your Job, it must be unique across all Jobs in your project
+  id: "example-job",
+  name: "Example Job: a joke with a delay",
+  version: "0.0.1",
+  // 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
+  trigger: eventTrigger({
+    name: "example.event",
+  }),
+  run: async (payload, io, ctx) => {
+    // This logs a message to the console
+    await io.logger.info("🧪 Example Job: a joke with a delay");
+    await io.logger.info("How do you comfort a JavaScript bug?");
+    // This waits for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year
+    await io.wait("Wait 5 seconds for the punchline...", 5);
+    await io.logger.info("You console it! 🤦");
+    await io.logger.info(
+      "✨ Congratulations, You just ran your first successful Trigger.dev Job! ✨"
+    );
+    // 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
+  },
+});
+```

docs/_snippets/quickstart-running-your-job.mdx

@@ -0,0 +1,18 @@
+<Step title="Triggering the Job">
+
+There are two way to trigger this Job.
+
+1. Use the "Test" functionality in the dashboard.
+2. Use the Trigger.dev API (either via our SDK or a web request)
+
+#### "Testing" from the dashboard
+
+Click into the Job and then open the "Test" tab. You should see this page:
+
+![Test Job](/images/test-job.png)
+
+This Job doesn't have a payload schema (meaning it takes an empty object), so you can simple click the "Run test" button.
+
+**Congratulations, you should get redirected so you can see your first Run!**
+
+</Step>

docs/_snippets/quickstart-setup-steps.mdx

@@ -0,0 +1,80 @@
+<Step title="Create a Trigger.dev account">
+
+You can either:
+
+- Use the [Trigger.dev Cloud](https://cloud.trigger.dev).
+- Or [self-host](/documentation/guides/self-hosting) the service.
+
+</Step>
+
+<Step title="Create your first project">
+
+Once you've created an account, follow the steps in the app to:
+
+1. Complete your account details.
+2. Create your first Organization and Project.
+
+</Step>
+
+<Step title="Getting an API key">
+
+1. Go to the "Environments & API Keys" page in your project.
+   ![Go to the Environments & API Keys page ](/images/environments-link.png)
+
+2. Copy the `DEV` **SERVER** API key.
+   ![API Keys](/images/api-keys.png)
+
+</Step>
+
+<Step title="Run the CLI `init` command">
+
+The easiest way to get started it to use the CLI. It will add Trigger.dev to your existing project, setup a route and give you an example file.
+
+In a terminal window run:
+
+<CodeGroup>
+
+```bash npm
+npx @trigger.dev/cli@latest init
+```
+
+```bash pnpm
+pnpm dlx @trigger.dev/cli@latest init
+```
+
+```bash yarn
+yarn dlx @trigger.dev/cli@latest init
+```
+
+</CodeGroup>
+
+It will ask you a couple of questions
+
+1. Are you using the [Trigger.dev Cloud](https://cloud.trigger.dev) or [self-hosting](/documentation/guides/self-hosting)?
+2. Enter your development API key. Enter the key you copied earlier.
+
+</Step>
+
+<Step title="Run your site">
+
+Make sure your site is running locally, we will connect to it to register your Jobs.
+
+<Warning>You must leave this running for the rest of the steps.</Warning>
+
+<CodeGroup>
+
+```bash npm
+npm run dev
+```
+
+```bash pnpm
+pnpm run dev
+```
+
+```bash yarn
+yarn run dev
+```
+
+</CodeGroup>
+
+</Step>

docs/_snippets/quickstart-whats-next.mdx

@@ -0,0 +1,20 @@
+## What's next?
+
+<CardGroup cols={2}>
+  <Card title="Write your first Job" icon="hexagon-plus" href="/documentation/guides/create-a-job">
+    A Guide for how to create your first real Job
+  </Card>
+  <Card
+    title="What is Trigger.dev"
+    icon="wand-magic-sparkles"
+    href="/documentation/concepts/what-is-triggerdotdev"
+  >
+    Learn more about how Trigger.dev works and how it can help you.
+  </Card>
+  <Card title="Examples" icon="slot-machine" href="/examples">
+    One of the quickest ways to learn how Trigger.dev works is to view some example Jobs.
+  </Card>
+  <Card title="Get help" icon="hire-a-helper" href="/documentation/get-help">
+    Struggling getting setup or have a question? We're here to help.
+  </Card>
+</CardGroup>

docs/documentation/guides/manual/nextjs.mdx

@@ -22,19 +22,15 @@ To begin, install the necessary packages in your Next.js project directory. You
 <CodeGroup>
 
 ```bash npm
-
 npm i @trigger.dev/sdk @trigger-dev/nextjs
-
 ```
 
 ```bash pnpm
 pnpm install @trigger.dev/sdk @trigger-dev/nextjs
-
 ```
 
 ```bash yarn
 yarn add @trigger.dev/sdk @trigger-dev/nextjs
-
 ```
 
 </CodeGroup>
@@ -58,67 +54,31 @@ Create a `.env.local` file at the root of your project and include your Trigger
 ```bash
 
 TRIGGER_API_KEY=ENTER_YOUR_DEVELOPMENT_API_KEY_HERE
-TRIGGER_API_URL=https://cloud.trigger.dev
+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
 
-To set up the Trigger Client for your project, follow these steps:
-
-1. **Create Configuration File:**
-
-   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`).
-
-2. **Choose Directory:**
-
-   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.
-
-3. **Add Configuration Code:**
+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.
 
-   Open the configuration file you created and add the following code:
+Next, add the following code to the file which creates and exports a new `TriggerClient`:
 
-   ```typescript
-   // trigger.ts (for TypeScript) or trigger.js (for JavaScript)
+```typescript src/trigger.(ts/js)
+// trigger.ts (for TypeScript) or trigger.js (for JavaScript)
 
-   import { TriggerClient } from "@trigger.dev/sdk";
+import { TriggerClient } from "@trigger.dev/sdk";
 
-   export const client = new TriggerClient({
-     id: "my-app",
-     apiKey: process.env.TRIGGER_API_KEY,
-     apiUrl: process.env.TRIGGER_API_URL,
-   });
-   ```
-
-   Replace **"my-app"** with an appropriate identifier for your project. The **apiKey** and **apiUrl** are obtained from the environment variables you set earlier.
-
-4. **File Location:**
-
-   Depending on your project structure, save the configuration file in the appropriate location:
-
-   - If your project uses a **src** directory, save the file within the **src** directory.
-   - If your project does not use a **src** directory, save the file in the project root.
-
-   **Example Directory Structure with src:**
-
-   ```
-       project-root/
-       ├── src/
-           ├── trigger.ts
-       ├── other files...
-   ```
-
-   **Example Directory Structure without src:**
-
-   ```
-       project-root/
-       ├── trigger.ts
-       ├── other files...
-   ```
+export const client = new TriggerClient({
+  id: "my-app",
+  apiKey: process.env.TRIGGER_API_KEY,
+  apiUrl: process.env.TRIGGER_API_URL,
+});
+```
 
-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.
+Replace **"my-app"** with an appropriate identifier for your project.
 
 ## Creating the API Route
 
@@ -238,18 +198,31 @@ Your `package.json` file might look something like this:
 
 Replace **"my-app"** with the appropriate identifier you used during the step for creating the Trigger Client.
 
-## Next Steps
+## Running
 
-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.
+### Run your Next.js app
 
-![Your first Job](/images/cli-dev.gif)
+Run your Next.js app locally, like you normally would. For example:
 
-<Warning>
-  Make sure your Next.js site is running locally before continuing. You must also leave this `dev`
-  terminal command running while you develop.
-</Warning>
+<CodeGroup>
 
-In a **new terminal window or tab** run:
+```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>
 
@@ -271,9 +244,10 @@ yarn dlx @trigger.dev/cli@latest dev
   You can optionally pass the port if you're not running on 3000 by adding
   `--port 3001` to the end
 </Note>
+
 <Note>
   You can optionally pass the hostname if you're not running on localhost by adding
-  `--hostname <host>`. Example, in case your Next.js is running on 0.0.0.0: `--hostname 0.0.0.0`.
+  `--hostname <host>`. Example, in case your Remix is running on 0.0.0.0: `--hostname 0.0.0.0`.
 </Note>
 
 <Tip>