feat(dev): detect portless proxy urls

#1300

Author: danielroe

packages/nuxt-cli/src/dev/listen.ts

@@ -14,6 +14,7 @@ import colors from 'picocolors'
 
 import { debug, logger } from '../utils/logger'
 import { resolveCertificate } from './cert'
+import { resolvePortlessURLs } from './portless'
 import { startTunnel } from './tunnel'
 
 export interface ListenOptions {
@@ -32,7 +33,7 @@ export interface ListenOptions {
 
 interface ListenURL {
   url: string
-  type: 'local' | 'network' | 'tunnel'
+  type: 'local' | 'network' | 'tunnel' | 'public'
 }
 
 /**
@@ -122,11 +123,18 @@ export async function listen(handler: RequestListener, options: ListenOptions =
     tunnel = await startTunnel(`${protocol}://localhost:${address.port}`, !!certificate)
   }
 
+  const portless = resolvePortlessURLs()
+  const portlessURL = portless.url && portless.url + baseURL
+  const portlessShareURL = portless.shareURL && portless.shareURL + baseURL
+
   function getURLs(): ListenURL[] {
     const urls: ListenURL[] = []
     if (tunnel) {
       urls.push({ url: tunnel.url, type: 'tunnel' })
     }
+    for (const portlessURL of portless.all) {
+      urls.push({ url: portlessURL + baseURL, type: 'public' })
+    }
     if (anyHost) {
       urls.push({ url: formatURL('localhost'), type: 'local' })
       for (const info of Object.values(networkInterfaces()).flat()) {
@@ -142,7 +150,7 @@ export async function listen(handler: RequestListener, options: ListenOptions =
     return urls
   }
 
-  const publicURL = options.publicURL || tunnel?.url
+  const publicURL = options.publicURL || tunnel?.url || portlessShareURL || portlessURL
 
   if (options.showURL !== false) {
     const urls = getURLs()
@@ -158,19 +166,19 @@ export async function listen(handler: RequestListener, options: ListenOptions =
       console.log(`\n${centerBlock(renderUnicodeCompact(qrURL))}\n`)
     }
 
-    const labels = { local: 'Local:', network: 'Network:', tunnel: 'Tunnel:' } as const
-    const labelColors = { local: colors.green, network: colors.magenta, tunnel: colors.cyan } as const
+    const labels = { local: 'Local:', network: 'Network:', tunnel: 'Tunnel:', public: 'Public:' } as const
+    const labelColors = { local: colors.green, network: colors.magenta, tunnel: colors.cyan, public: colors.magenta } as const
     const lines: string[] = []
     const line = (color: (text: string) => string, label: string, value: string, isQR: boolean) =>
       `  ${color('➜')} ${colors.bold(color(label.padEnd(10)))}${value}${isQR ? colors.gray(' [QR code]') : ''}`
     for (const { url: displayURL, type } of urls) {
       lines.push(line(labelColors[type], labels[type], colors.cyan(displayURL), displayURL === qrURL))
     }
-    if (!anyHost && !tunnel) {
+    if (!anyHost && !tunnel && !portless.url) {
       lines.push(line(colors.magenta, 'Network:', colors.gray(`use ${colors.white('--host')} to expose`), false))
     }
-    if (options.publicURL && options.publicURL !== url) {
-      lines.push(line(colors.magenta, 'Public:', colors.cyan(options.publicURL), options.publicURL === qrURL))
+    if (publicURL && publicURL !== url && !urls.some(entry => entry.url === publicURL)) {
+      lines.push(line(colors.magenta, 'Public:', colors.cyan(publicURL), publicURL === qrURL))
     }
     // eslint-disable-next-line no-console
     console.log(`${qrURL ? '' : '\n'}${lines.join('\n')}\n`)

packages/nuxt-cli/src/dev/portless.ts

@@ -0,0 +1,40 @@
+import process from 'node:process'
+
+export interface PortlessURLs {
+  /** Stable proxy URL for the app, e.g. `https://myapp.localhost`. */
+  url?: string
+  /** Publicly reachable URL, when sharing via Tailscale Funnel or ngrok. */
+  shareURL?: string
+  /** Every portless-provided URL, for host allowlists and CORS origins. */
+  all: string[]
+}
+
+/**
+ * Resolve the URLs of the [portless](https://portless.sh) proxy, if the dev
+ * server was started through it (`portless myapp nuxt dev`).
+ *
+ * portless runs as the parent process: it assigns a random `PORT`, proxies a
+ * stable hostname to it, and passes the resulting URLs down in the environment.
+ * Requests therefore arrive with a `Host` header we would otherwise reject.
+ */
+export function resolvePortlessURLs(env: NodeJS.ProcessEnv = process.env): PortlessURLs {
+  const url = normalize(env.PORTLESS_URL)
+  const shareURL = normalize(env.PORTLESS_NGROK_URL) || normalize(env.PORTLESS_TAILSCALE_URL)
+  return {
+    url,
+    shareURL,
+    all: [...new Set([url, shareURL].filter(Boolean) as string[])],
+  }
+}
+
+function normalize(value: string | undefined): string | undefined {
+  if (!value) {
+    return undefined
+  }
+  try {
+    return new URL(value).origin
+  }
+  catch {
+    return undefined
+  }
+}

packages/nuxt-cli/src/dev/utils.ts

@@ -30,6 +30,7 @@ import { loadNuxtManifest, resolveNuxtManifest, writeNuxtManifest } from '../uti
 import { withNodePath } from '../utils/paths'
 import { renderError, renderErrorAnsi } from './error'
 import { listen } from './listen'
+import { resolvePortlessURLs } from './portless'
 
 export type NuxtParentIPCMessage
   = | { type: 'nuxt:internal:dev:context', context: NuxtDevContext, listenOverrides: DevListenOverrides }
@@ -626,6 +627,13 @@ function resolveDevServerDefaults(listenOptions: { hostname?: string, https: boo
     defaultConfig.vite = defu(defaultConfig.vite, { server: { allowedHosts: [listenOptions.hostname] } })
   }
 
+  // Browser requests reach us through the portless proxy, so its origins have
+  // to be allowed even when the server itself is bound to localhost.
+  const portlessOrigins = resolvePortlessURLs().all
+  if (portlessOrigins.length > 0) {
+    defaultConfig.devServer = defu(defaultConfig.devServer, { cors: { origin: portlessOrigins } })
+  }
+
   return defaultConfig
 }
 

packages/nuxt-cli/test/unit/portless.spec.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolvePortlessURLs } from '../../src/dev/portless'
+
+describe('resolvePortlessURLs', () => {
+  it('should return no urls when not running under portless', () => {
+    expect(resolvePortlessURLs({})).toStrictEqual({ url: undefined, shareURL: undefined, all: [] })
+  })
+
+  it('should normalise the proxy url to an origin', () => {
+    const result = resolvePortlessURLs({ PORTLESS_URL: 'https://myapp.localhost/' })
+    expect(result.url).toBe('https://myapp.localhost')
+    expect(result.all).toStrictEqual(['https://myapp.localhost'])
+  })
+
+  it('should prefer ngrok over tailscale for the share url', () => {
+    const result = resolvePortlessURLs({
+      PORTLESS_URL: 'https://myapp.localhost',
+      PORTLESS_NGROK_URL: 'https://abc123.ngrok.app',
+      PORTLESS_TAILSCALE_URL: 'https://devbox.tail1234.ts.net',
+    })
+    expect(result.shareURL).toBe('https://abc123.ngrok.app')
+    expect(result.all).toStrictEqual(['https://myapp.localhost', 'https://abc123.ngrok.app'])
+  })
+
+  it('should fall back to tailscale for the share url', () => {
+    const result = resolvePortlessURLs({ PORTLESS_TAILSCALE_URL: 'https://devbox.tail1234.ts.net:8443' })
+    expect(result.shareURL).toBe('https://devbox.tail1234.ts.net:8443')
+  })
+
+  it('should ignore malformed urls', () => {
+    expect(resolvePortlessURLs({ PORTLESS_URL: 'myapp.localhost' }).all).toStrictEqual([])
+  })
+})