Nuxt•3y ago

why nuxt prepends `__url` on dev server for client?

I have a dev server middleware in the pwa plugin that serves the webmanifest and service worker for development. The problem is that middleware receives the webmanifest and the service worker requests prefixed with /__url: I can bypass it using:

if (nuxt.options.dev) {
    const webManifest = `${nuxt.options.app.baseURL}${options.devOptions?.webManifestUrl ?? options.manifestFilename ?? 'manifest.webmanifest'}`
    const devSw = `${nuxt.options.app.baseURL}dev-sw.js?dev-sw`
    nuxt.hooks.hook('vite:serverCreated', (viteServer, { isClient }) => {
        if (isClient) {
          viteServer.middlewares.stack.push({
            route: webManifest,
            // @ts-expect-error just ignore
            handle: (_req, _res, next) => {
              next()
            },
          })
          viteServer.middlewares.stack.push({
            route: devSw,
            // @ts-expect-error just ignore
            handle: (_req, _res, next) => {
              next()
            },
          })
       }
    })
}

if (nuxt.options.dev) {
    const webManifest = `${nuxt.options.app.baseURL}${options.devOptions?.webManifestUrl ?? options.manifestFilename ?? 'manifest.webmanifest'}`
    const devSw = `${nuxt.options.app.baseURL}dev-sw.js?dev-sw`
    nuxt.hooks.hook('vite:serverCreated', (viteServer, { isClient }) => {
        if (isClient) {
          viteServer.middlewares.stack.push({
            route: webManifest,
            // @ts-expect-error just ignore
            handle: (_req, _res, next) => {
              next()
            },
          })
          viteServer.middlewares.stack.push({
            route: devSw,
            // @ts-expect-error just ignore
            handle: (_req, _res, next) => {
              next()
            },
          })
       }
    })
}

The problem comes when using generateSW strategy, since the request to the service worker will generate a workbox-**.js asset and we don't know the name: the pwa dev server middleware also serves this asset, all workbox-build stuff (js and map assets) are stored once the sw is built and so it can also serve those resources. The problem is here: https://github.com/nuxt/framework/blob/main/packages/vite/src/client.ts#L112

8 Replies

JoaquínOP•3y ago

I'll try to send a PR to check the viteMiddleware later, or maybe directly use the middlewares list to check the middlewares.stack is being checked too soon, it will work only for static assets luckely there is a pattern, the workbox entry is always workbox-**.js and so I can hack nuxt using:

    if (nuxt.options.dev) {
      const webManifest = `${nuxt.options.app.baseURL}${options.devOptions?.webManifestUrl ?? options.manifestFilename ?? 'manifest.webmanifest'}`
      const devSw = `${nuxt.options.app.baseURL}dev-sw.js?dev-sw`
      const workbox = `${nuxt.options.app.baseURL}workbox-`
      nuxt.hooks.hook('vite:serverCreated', (viteServer, { isClient }) => {
        if (isClient) {
          viteServer.middlewares.stack.push({
            route: webManifest,
            // @ts-expect-error just ignore
            handle: (_req, _res, next) => {
              next()
            },
          })
          viteServer.middlewares.stack.push({
            route: devSw,
            // @ts-expect-error just ignore
            handle: (_req, _res, next) => {
              next()
            },
          })
          if (!options.strategies || options.strategies === 'generateSW') {
            viteServer.middlewares.stack.push({
              route: workbox,
              // @ts-expect-error just ignore
              handle: (_req, _res, next) => {
                next()
              },
            })
          }

        }
      })
    }

    if (nuxt.options.dev) {
      const webManifest = `${nuxt.options.app.baseURL}${options.devOptions?.webManifestUrl ?? options.manifestFilename ?? 'manifest.webmanifest'}`
      const devSw = `${nuxt.options.app.baseURL}dev-sw.js?dev-sw`
      const workbox = `${nuxt.options.app.baseURL}workbox-`
      nuxt.hooks.hook('vite:serverCreated', (viteServer, { isClient }) => {
        if (isClient) {
          viteServer.middlewares.stack.push({
            route: webManifest,
            // @ts-expect-error just ignore
            handle: (_req, _res, next) => {
              next()
            },
          })
          viteServer.middlewares.stack.push({
            route: devSw,
            // @ts-expect-error just ignore
            handle: (_req, _res, next) => {
              next()
            },
          })
          if (!options.strategies || options.strategies === 'generateSW') {
            viteServer.middlewares.stack.push({
              route: workbox,
              // @ts-expect-error just ignore
              handle: (_req, _res, next) => {
                next()
              },
            })
          }

        }
      })
    }

danielroe•3y ago

we need to fix this issue more generally. (so you don't have to do the hack)

JoaquínOP•3y ago

I will check it tmr, I had a similar problem with SvelteKit integration... dev sw working and also with generate, I need to review the build:

JoaquínOP•3y ago

JoaquínOP•3y ago

@danielroe created issue https://github.com/nuxt/framework/issues/9205 for tracking

danielroe•3y ago

thank you 👍

JoaquínOP•3y ago

why is this needed? // Workaround: vite devmiddleware modifies req.url I just test it removing the /__url prefix logic and it works

danielroe•3y ago

The issue is that it also means that /app will load app.vue, for example, even if you have a route named /app

Gaming

Programming

why nuxt prepends `__url` on dev server for client?