Joaquín Posts - Answer Overflow

Joaquín

•Created by Joaquín on 10/4/2024 in #❓・help

why nuxt not exposing `NUXT_` nor `NUXT_PUBLIC_` env entries in `import.meta.env`?

When configuring custom entries via vite.define or runtimeConfig.publicthere is no way to access them via import.meta.env. The only way is using .env file + VITE_ prefix: I need some entries in a service worker (firebase stuff for example) https://github.com/vite-pwa/vite-plugin-pwa/discussions/762#discussioncomment-10843259

3 replies

NNuxt

•Created by Joaquín on 11/19/2022 in #❓・help

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

12 replies

NNuxt

•Created by Joaquín on 11/18/2022 in #❓・help

importing raw css with ?inline

30 replies

Gaming

Programming