.env.[mode] files

[jmgirven]

Does VitePWA support Vite's .env.[mode] files?

https://vitejs.dev/guide/env-and-mode.html#env-files

I tried creating a very simple Vite react app (yarn create vite my-react-app --template react-ts) and installed VitePWA. My service worker has a log for import.meta.env to see what variables are passed in. I created a .env.devAPI file in the root of the project with an environment variable I want to specify. I added a command in my package.json "build:devAPI": "vite --mode devAPI build". When run, in the main code I can see my added environment variable. However, in the service worker code I do not see it.

If instead I just add environment variables to a .env file, they do appear in the service worker. I guess this .env.[mode] is not supported by VitePWA.

[userquin]

What are the env var names in the env file? IIRC only those starting with VITE_ will be available

[jmgirven]

What are the env var names in the env file? IIRC only those starting with VITE_ will be available

VITE_API_BASE_URL is what I used in my quick example project.

[CodingDoug]

I am experiencing this problem as well. When vite builds my PWA, it honors the --mode flag for the normal web content, but always uses "production" for the service worker. As such, it does not pick up dotenv files for that mode, and I cannot use VITE_* env as I would expect. The output of npx vite build --mode preview is pretty clear:

$ npx vite build --mode preview

vite v5.0.10 building for preview...      <-- note that this is correctly "preview"
...output redacted

vite v5.0.10 building for production...   <-- note that this is INCORRECTLY "production"
...output redacted

PWA v0.17.4
mode      injectManifest
precache  9 entries (1343.52 KiB)
files generated
  dist/sw.js
✓ built in 2.42s

If you look at the output of --debug it will also show that the service worker part of the build is "production" and not "preview", and did not pick up the relevant env for that mode. However, it does pick up other relevant dotenv vars, such as ".env" and ".env.production". This feels like it can be solved by propagating the given mode to the SW part of the build.

This is currently very problematic for my build as it requires a lot of messing with dotenv files as I switch between build modes. I have found no easy workaround to force the mode I want for my SW.

[userquin]

can you provide a repro? we also need to provide some options to workbox-build, this PR #572 only fixes the mode in the Vite build.

I'll try to include the changes in this another one PR: #629

[CodingDoug]

@userquin Repro with instructions: https://github.com/CodingDoug/vite-pwa-mode-repro

[userquin]

@CodingDoug thx, I'll try to take a look later