Environment Variables: In development, envars from .env are not loaded to worker when running vite dev

[dthyresson]

Environment variables are available on the env parameter passed to your Worker's fetch event handler.

However, when running vite dev locally, any .env isn't loaded and one must define them in wrangler.toml. I suspect the issue is likely occurring because:

• When running with wrangler, the environment variables from wrangler.toml are automatically injected into your worker's environment. Also, according to the docs and .env will be loaded, too.

But we don't run wrangler dev we run vite dev.

• However, when running with Vite in development mode, these variables aren't automatically loaded from .env and set to the same env parameter as Vite has its own environment variable handling system.

Having to define envars in toml is an issue because I don't want to check into any public repo my secrets like API keys etc.

To reproduce

• define an envar in wrangler.toml
• define its type in worker-configuration.d.ts
• use in a worker or in a server component/function
• remove from toml
• add to .env
• try it
• envar will be undefined

[dthyresson]

After some reading, looks like with Cloudflare and Vite, one defines the envars in .dev.vars.

See: https://developers.cloudflare.com/workers/configuration/secrets/#local-development-with-secrets

Now, when running pnpm dev:

> while true; do NODE_ENV=development vite dev; [ $? -eq 0 ] || break; done

Using vars defined in .dev.vars. <<<<<<----- this is new
Generating wrangler types...

  VITE v6.1.1  ready in 1689 ms

  ➜  Local:   http://localhost:2332/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

vars are loaded and don't need to define in toml.

Perhaps, this just need documentation?