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'
 
 exportinterfaceListenOptions{
@@ -32,7 +33,7 @@ export interface ListenOptions {
 
 interfaceListenURL{
 url: string
-type: 'local'|'network'|'tunnel'
+type: 'local'|'network'|'tunnel'|'public'
 }
 
 /**
@@ -122,11 +123,18 @@ export async function listen(handler: RequestListener, options: ListenOptions =
 tunnel=awaitstartTunnel(`${protocol}://localhost:${address.port}`,!!certificate)
 }
 
+constportless=resolvePortlessURLs()
+constportlessURL=portless.url&&portless.url+baseURL
+constportlessShareURL=portless.shareURL&&portless.shareURL+baseURL
+
 functiongetURLs(): ListenURL[]{
 consturls: ListenURL[]=[]
 if(tunnel){
 urls.push({url: tunnel.url,type: 'tunnel'})
 }
+for(constportlessURLofportless.all){
+urls.push({url: portlessURL+baseURL,type: 'public'})
+}
 if(anyHost){
 urls.push({url: formatURL('localhost'),type: 'local'})
 for(constinfoofObject.values(networkInterfaces()).flat()){
@@ -142,7 +150,7 @@ export async function listen(handler: RequestListener, options: ListenOptions =
 returnurls
 }
 
-constpublicURL=options.publicURL||tunnel?.url
+constpublicURL=options.publicURL||tunnel?.url||portlessShareURL||portlessURL
 
 if(options.showURL!==false){
 consturls=getURLs()
@@ -158,19 +166,19 @@ export async function listen(handler: RequestListener, options: ListenOptions =
 console.log(`\n${centerBlock(renderUnicodeCompact(qrURL))}\n`)
 }
 
-constlabels={local: 'Local:',network: 'Network:',tunnel: 'Tunnel:'}asconst
-constlabelColors={local: colors.green,network: colors.magenta,tunnel: colors.cyan}asconst
+constlabels={local: 'Local:',network: 'Network:',tunnel: 'Tunnel:',public: 'Public:'}asconst
+constlabelColors={local: colors.green,network: colors.magenta,tunnel: colors.cyan,public: colors.magenta}asconst
 constlines: string[]=[]
 constline=(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 }ofurls){
 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 @@
+importprocessfrom'node:process'
+
+exportinterfacePortlessURLs{
+/** 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.
+ */
+exportfunctionresolvePortlessURLs(env: NodeJS.ProcessEnv=process.env): PortlessURLs{
+consturl=normalize(env.PORTLESS_URL)
+constshareURL=normalize(env.PORTLESS_NGROK_URL)||normalize(env.PORTLESS_TAILSCALE_URL)
+return{
+ url,
+ shareURL,
+all: [...newSet([url,shareURL].filter(Boolean)asstring[])],
+}
+}
+
+functionnormalize(value: string|undefined): string|undefined{
+if(!value){
+returnundefined
+}
+try{
+returnnewURL(value).origin
+}
+catch{
+returnundefined
+}
+}

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'
 
 exporttypeNuxtParentIPCMessage
 =|{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.
+constportlessOrigins=resolvePortlessURLs().all
+if(portlessOrigins.length>0){
+defaultConfig.devServer=defu(defaultConfig.devServer,{cors: {origin: portlessOrigins}})
+}
+
 returndefaultConfig
 }
 

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',()=>{
+constresult=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',()=>{
+constresult=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',()=>{
+constresult=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([])
+})
+})