feat: add hostname option to the dev command (#370)

* feat: add hostname option to the dev command

- This commit adds a `hostname` option to the cli `dev` command, to allow the cli to point to nextjs applications running on different hostnames other than `localhost`. Example: the nextjs app was started using a --hostname 0.0.0.0 option to be able to be visible from inside docker containers. So adding --hostname 0.0.0.0 to `trigger-cli dev` would make it work.

* docs: add dev cli command hostname option documentation

* feat: add hostname option to the dev command

- This commit adds a `hostname` option to the cli `dev` command, to allow the cli to point to nextjs applications running on different hostnames other than `localhost`. Example: the nextjs app was started using a --hostname 0.0.0.0 option to be able to be visible from inside docker containers. So adding --hostname 0.0.0.0 to `trigger-cli dev` would make it work.

* docs: add dev cli command hostname option documentation

* Update hip-coins-reply.md

---------

Co-authored-by: Eric Allam <[email protected]>

Author: hugomn

.changeset/hip-coins-reply.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Added hostname option to the cli dev command

docs/documentation/guides/cli.mdx

@@ -60,15 +60,13 @@ yarn dlx @trigger.dev/cli@latest init
 
 <Accordion title="Enter your 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_`).
+  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_`).
 </Accordion>
 
 <Accordion title="Enter a unique ID for your endpoint">
-  Enter a custom ID or use the default by hitting enter. You can learn more
-  about endpoints
+  Enter a custom ID or use the default by hitting enter. You can learn more about endpoints
   [here](/documentation/concepts/environments-endpoints#endpoints).
 </Accordion>
 
@@ -81,8 +79,8 @@ Once you're running your Next.js project locally, you can then execute the `dev`
 ![Your first Job](/images/cli-dev.gif)
 
 <Warning>
-  Make sure your Next.js site is running locally before continuing. You must
-  also leave this `dev` terminal command running while you develop.
+  Make sure your Next.js site is running locally before continuing. You must also leave this `dev`
+  terminal command running while you develop.
 </Warning>
 
 In a **new terminal window or tab** run:
@@ -107,3 +105,7 @@ 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`.
+</Note>

docs/documentation/guides/manual.mdx

@@ -258,5 +258,9 @@ 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`.
+</Note>
 
 <Tip>If your existing Next.js project utilizes middleware and you encounter any issues, such as potential conflicts with Trigger.dev, it's recommended to refer to the troubleshooting guide at [Middleware](/documentation/guides/platforms/nextjs#middleware) for assistance. This guide can help you address any concerns related to middleware conflicts and ensure the smooth functioning of your project with Trigger.dev.</Tip>

packages/cli/src/cli/index.ts

@@ -42,6 +42,7 @@ program
   .description("Tunnel your local Next.js project to Trigger.dev and start running jobs")
   .argument("[path]", "The path to the project", ".")
   .option("-p, --port <port>", "The local port your server is on", "3000")
+  .option("-H, --hostname <hostname>", "Hostname on which the application is served", "localhost")
   .option("-e, --env-file <name>", "The name of the env file to load", ".env.local")
   .option(
     "-i, --client-id <name>",

packages/cli/src/commands/dev.ts

@@ -19,6 +19,7 @@ const asyncExecFile = util.promisify(childProcess.execFile);
 
 export const DevCommandOptionsSchema = z.object({
   port: z.coerce.number(),
+  hostname: z.string(),
   envFile: z.string(),
   handlerPath: z.string(),
   clientId: z.string().optional(),
@@ -72,7 +73,7 @@ export async function devCommand(path: string, anyOptions: any) {
 
   logger.info(`  [trigger.dev] Looking for Next.js site on port ${options.port}`);
 
-  const localEndpointHandlerUrl = `http://localhost:${options.port}${options.handlerPath}`;
+  const localEndpointHandlerUrl = `http://${options.hostname}:${options.port}${options.handlerPath}`;
 
   try {
     await fetch(localEndpointHandlerUrl, {
@@ -94,7 +95,7 @@ export async function devCommand(path: string, anyOptions: any) {
   telemetryClient.dev.serverRunning(path, options);
 
   // Setup tunnel
-  const endpointUrl = await resolveEndpointUrl(apiUrl, options.port);
+  const endpointUrl = await resolveEndpointUrl(apiUrl, options.port, options.hostname);
   if (!endpointUrl) {
     telemetryClient.dev.failed("failed_to_create_tunnel", options);
     return;
@@ -279,11 +280,11 @@ export async function getTriggerApiDetails(path: string, envFile: string) {
   return { apiKey, apiUrl: apiUrl ?? CLOUD_API_URL, envFile: resolvedEnvFile.fileName };
 }
 
-async function resolveEndpointUrl(apiUrl: string, port: number) {
+async function resolveEndpointUrl(apiUrl: string, port: number, hostname: string) {
   const apiURL = new URL(apiUrl);
 
   if (apiURL.hostname === "localhost") {
-    return `http://localhost:${port}`;
+    return `http://${hostname}:${port}`;
   }
 
   // Setup tunnel