fix: support user baseURL, close #506

packages/devtools/client/components/BuildAnalyzeDetails.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { formatTimeAgo } from '@vueuse/core'
 import type { AnalyzeBuildMeta } from '../../src/types'
+import { useRuntimeConfig } from '#imports'
 
 const props = defineProps<{
   current: AnalyzeBuildMeta
   prev?: AnalyzeBuildMeta
 }>()
 
-const ROUTE_ANALYZE = '/__nuxt_devtools__/analyze/'
+const runtimeConfig = useRuntimeConfig()
+const ROUTE_ANALYZE = `${runtimeConfig.app.baseURL}/__nuxt_devtools__/analyze/`.replace(/\/+/g, '/')
 
 const tabs = computed(() => {
   const items = [

packages/devtools/client/composables/rpc.ts

@@ -41,17 +41,19 @@ export const rpc = createBirpc<ServerFunctions, ClientFunctions>(clientFunctions
 })
 
 async function connectVite() {
-  let base = window.parent?.__NUXT__?.config?.app?.baseURL
+  let base = window.parent?.__NUXT__?.config?.app?.baseURL ?? '/'
   const buildAssetsDir = window.parent?.__NUXT__?.config?.app.buildAssetsDir.replace(/^\/|\/$/g, '') ?? '_nuxt'
   if (base && !base.endsWith('/'))
     base += '/'
-  const hot = await tryCreateHotContext(undefined, [
-    ...(base
-      ? [`${base}${buildAssetsDir}/`, base]
-      : []),
-    '/_nuxt/',
-    '/',
-  ])
+  const current = window.location.href.replace(/\/__nuxt_devtools__\/client\/.*$/, '/')
+  const hot = await tryCreateHotContext(undefined, Array.from(new Set([
+    current,
+    `${current}${buildAssetsDir}/`,
+    `${current}_nuxt/`,
+    base,
+    `${base}${buildAssetsDir}/`,
+    `${base}_nuxt/`,
+  ])))
 
   if (!hot) {
     wsConnecting.value = true

packages/devtools/client/nuxt.config.ts

@@ -14,9 +14,7 @@ export default defineNuxtConfig({
     DevTools,
   ],
   ssr: false,
-  pages: true,
   nitro: {
-    preset: 'static',
     output: {
       publicDir: r('../dist/client'),
     },
@@ -26,6 +24,12 @@ export default defineNuxtConfig({
         base: r('./.data/test'),
       },
     },
+    hooks: {
+      'prerender:routes': function (routes) {
+        // Disable prerendering as it's an SPA
+        routes.clear()
+      },
+    },
   },
   alias: {
     '@nuxt/devtools-kit/iframe-client': r('../../devtools-kit/src/runtime/iframe-client'),
@@ -70,4 +74,11 @@ export default defineNuxtConfig({
   typescript: {
     includeWorkspace: true,
   },
+  // Production Overrides
+  $production: {
+    app: {
+      // We set a placeholder for the middleware to be replaced with the correct base URL
+      baseURL: '/__NUXT_DEVTOOLS_BASE__/',
+    },
+  },
 })

packages/devtools/src/constant.ts

@@ -1,12 +1,6 @@
 import { provider } from 'std-env'
 import type { ModuleOptions, NuxtDevToolsOptions } from './types'
 
-export const ROUTE_PATH = '/__nuxt_devtools__'
-export const ROUTE_ENTRY = `${ROUTE_PATH}/entry`
-export const ROUTE_CLIENT = `${ROUTE_PATH}/client`
-export const ROUTE_AUTH = `${ROUTE_PATH}/auth`
-export const ROUTE_AUTH_VERIFY = `${ROUTE_PATH}/auth-verify`
-export const ROUTE_ANALYZE = `${ROUTE_PATH}/analyze`
 export const WS_EVENT_NAME = 'nuxt:devtools:rpc'
 
 const isSandboxed = provider === 'stackblitz' || provider === 'codesandbox'

packages/devtools/src/module-main.ts

@@ -1,17 +1,19 @@
 import { existsSync } from 'node:fs'
 import os from 'node:os'
+import fs from 'node:fs/promises'
+import type { ServerResponse } from 'node:http'
 import { join } from 'pathe'
 import type { Nuxt } from 'nuxt/schema'
 import { addPlugin, addTemplate, addVitePlugin, logger } from '@nuxt/kit'
-import type { ViteDevServer } from 'vite'
+import type { Connect, ViteDevServer } from 'vite'
 import { searchForWorkspaceRoot } from 'vite'
 import sirv from 'sirv'
 import { colors } from 'consola/utils'
 import { version } from '../package.json'
 import type { ModuleOptions, NuxtDevToolsOptions } from './types'
 import { setupRPC } from './server-rpc'
 import { clientDir, isGlobalInstall, packageDir, runtimeDir } from './dirs'
-import { ROUTE_ANALYZE, ROUTE_AUTH, ROUTE_AUTH_VERIFY, ROUTE_CLIENT, defaultTabOptions } from './constant'
+import { defaultTabOptions } from './constant'
 import { getDevAuthToken } from './dev-auth'
 import { readLocalOptions } from './utils/local-options'
 
@@ -122,12 +124,36 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
     })
   })
 
+  const ROUTE_PATH = `${nuxt.options.app.baseURL || '/'}/__nuxt_devtools__`.replace(/\/+/g, '/')
+  const ROUTE_CLIENT = `${ROUTE_PATH}/client`
+  const ROUTE_AUTH = `${ROUTE_PATH}/auth`
+  const ROUTE_AUTH_VERIFY = `${ROUTE_PATH}/auth-verify`
+  const ROUTE_ANALYZE = `${ROUTE_PATH}/analyze`
+
   // TODO: Use WS from nitro server when possible
   nuxt.hook('vite:serverCreated', (server: ViteDevServer) => {
     server.middlewares.use(ROUTE_ANALYZE, sirv(analyzeDir, { single: false, dev: true }))
-    // serve the front end in production
-    if (clientDirExists)
-      server.middlewares.use(ROUTE_CLIENT, sirv(clientDir, { single: true, dev: true }))
+    // Serve the front end in production
+    if (clientDirExists) {
+      const indexHtmlPath = join(clientDir, 'index.html')
+      const indexContent = fs.readFile(indexHtmlPath, 'utf-8')
+      const handleStatic = sirv(clientDir, {
+        dev: true,
+        single: false,
+      })
+      // We replace the base URL in the index.html based on user's settings
+      const handleIndex = async (res: ServerResponse) => {
+        res.setHeader('Content-Type', 'text/html')
+        res.statusCode = 200
+        res.write((await indexContent).replace(/\/__NUXT_DEVTOOLS_BASE__\//g, `${ROUTE_CLIENT}/`))
+        res.end()
+      }
+      server.middlewares.use(ROUTE_CLIENT, (req, res) => {
+        if (req.url === '/')
+          return handleIndex(res)
+        return handleStatic(req, res, () => handleIndex(res))
+      })
+    }
     server.middlewares.use(ROUTE_AUTH, sirv(join(runtimeDir, 'auth'), { single: true, dev: true }))
     server.middlewares.use(ROUTE_AUTH_VERIFY, async (req, res) => {
       const search = req.url?.split('?')[1]

packages/devtools/src/runtime/plugins/view/client.ts

@@ -11,7 +11,7 @@ import { popupWindow, state } from './state'
 
 // eslint-disable-next-line ts/prefer-ts-expect-error
 // @ts-ignore tsconfig
-import { useAppConfig } from '#imports'
+import { useAppConfig, useRuntimeConfig } from '#imports'
 
 const clientRef = shallowRef<NuxtDevtoolsHostClient>()
 
@@ -123,7 +123,8 @@ export async function setupDevToolsClient({
 
   function getIframe() {
     if (!iframe) {
-      const CLIENT_PATH = '/__nuxt_devtools__/client'
+      const runtimeConfig = useRuntimeConfig()
+      const CLIENT_PATH = `${runtimeConfig.app.baseURL}/__nuxt_devtools__/client`.replace(/\/+/g, '/')
       const initialUrl = CLIENT_PATH + state.value.route
       try {
         iframe = document.createElement('iframe')

packages/devtools/src/server-rpc/general.ts

@@ -12,7 +12,6 @@ import type { ModuleOptions, NuxtLayout } from '@nuxt/schema'
 import type { AutoImportsWithMetadata, HookInfo, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 import { setupHooksDebug } from '../runtime/shared/hooks'
 import { getDevAuthToken } from '../dev-auth'
-import { ROUTE_AUTH } from '../constant'
 
 export function setupGeneralRPC({ nuxt, options, refresh, openInEditorHooks }: NuxtDevtoolsServerContext) {
   const components: Component[] = []
@@ -196,6 +195,8 @@ export function setupGeneralRPC({ nuxt, options, refresh, openInEditorHooks }: N
 
       origin ||= `${nuxt.options.devServer.https ? 'https' : 'http'}://${nuxt.options.devServer.host === '::' ? 'localhost' : (nuxt.options.devServer.host || 'localhost')}:${nuxt.options.devServer.port}`
 
+      const ROUTE_AUTH = `${nuxt.options.app.baseURL || '/'}/__nuxt_devtools__/auth`.replace(/\/+/g, '/')
+
       const message = [
         `A browser is requesting permissions of ${colors.bold(colors.yellow('writing files and running commands'))} from the DevTools UI.`,
         colors.bold(info),