Vite dev server screen additional infos (mode, loaded env)

[y-nk]

Description

As a developer using the dev server (vite) I'd like to see the mode passed with the --mode option, as well as the stack of .env var loaded.

Suggested solution

For mode, i guess directly here:

  VITE v5.4.11  ready in 171 ms

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

For env, a new shortcut

  Shortcuts
  press e + enter to see the env files loaded
  press r + enter to restart the server
  press u + enter to show server url
  press o + enter to open in browser
  press c + enter to clear console
  press q + enter to quit

→

  Env files loaded:
  1. .env
  2. .env.local
  3. .env.development

Alternative

there's no real alternative, you can only console.log(import.meta.env) and compute the values mentally

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

I think it makes sense to show the mode. But for the loaded env files, I guess you can know which file is loaded if you know which mode it's running in.