vite-pwa/nuxt production

[humble sluice]

Has someone had problems with vite-pwa/nuxt working properly on dev, but broken in production due to cdnUrl?

Currently I'm in this situation where everything works just fine on dev server, but when I deploy the app (aws lambda/s3), the manifest can't be found and the s3 serves the index.html instead. The service worker is found but, because of the manifest I think, it keeps on "trying to install"

I tried manually insert the manifest with the cdnUrl, while maintaining the service worker on '/' but it seems they need to be on the same site.

So I'm kinda lost now, can anyone help?

[snow sluice]

Hi @humble sluice. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The knowledge sources don't contain enough specific information to fully address your exact issue with @vite-pwa/nuxt and cdnURL in production on AWS Lambda/S3. However, I can share a few relevant points from what's available:

What the knowledge sources do mention

1. PWA dev mode issues: One known issue is that hydration errors and routing problems with @vite-pwa/nuxt occur specifically when devOptions.enabled: true is set. The recommended fix is to disable PWA in development and only enable it for production. [PWA hydration errors]

2. cdnURL and relative paths: There is a known Nuxt fix where if cdnURL is set, Nuxt skips relativising the import map, since it won't be a relative path. [cdnURL importmap fix] This suggests that mixing a cdnURL-hosted asset with a service worker at / can cause conflicts, which aligns with what you're experiencing.

3. S3/CloudFront static hosting: A similar deployment issue on S3+CloudFront was resolved by ensuring subdirectory routes serve the correct index.html (using Lambda@Edge) and adding trailing slashes. [canonical URL S3 fix] While this is about canonical URLs, the root cause (S3 serving index.html for missing paths) is the same pattern you're hitting with the manifest.

Suggestions based on the knowledge sources

• Make sure your S3/CloudFront setup correctly serves the manifest.webmanifest file and doesn't fall back to index.html for it. A Lambda@Edge function (as described in the S3 fix) can help route requests correctly.
• If you're using cdnURL, be aware that the service worker and manifest generally need to be served from the same origin. Hosting the manifest on a CDN while the service worker is at / is a known source of breakage.
• Consider disabling devOptions.enabled in development to avoid dev/prod discrepancies:

pwa: {
  devOptions: {
    enabled: false // disable in dev to match production behavior
  }
}

Beyond this, the knowledge sources don't contain enough detail about the specific @vite-pwa/nuxt + cdnURL + AWS Lambda/S3 combination to give a more precise answer. I'd recommend checking the @vite-pwa/nuxt GitHub issues directly for this specific scenario.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: