⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

Environment Variables

Environment variables can be defined in .env and .env.[mode] files.

# .env.development
DATABASE_URL=postgresql://localhost:5432

# .env.production
DATABASE_URL=postgresql://database.example.com:5432
DATABASE_PASSWORD=some-secret-password

# .env
EMAIL_USER=John Doe
PUBLIC_ENV__SOME_KEY=123

The .env.production/.env.development file is loaded only in production/development while .env is always loaded, see Vite Docs > .env Files.

For files not processed by Vite, you need to manually install dotenv for your .env values to also be available in files that aren't processed by Vite.

function somehere() {
  // Environment variables prefixed with PUBLIC_ENV__ can be used anywhere: in server-side code
  // as well as in client-side code.
  import.meta.env.PUBLIC_ENV__SOME_KEY
}
function onBeforeRender() {
  // Environment variables without the PUBLIC_ENV__ prefix can be used only in server-side code.
  // If this onBeforeRender() hook is loaded only on the server-side (which is the case
  // by default) then DATABASE_PASSWORD can be accessed here.
  import.meta.env.DATABASE_PASSWORD
}

The ({}).* variables are statically replaced:

// ❌ Won't work
import.meta.env['SOME_ENV']
// ❌ Won't work
const { SOME_ENV } = import.meta.env
// ✅ Works
import.meta.env.SOME_ENV
⚠️

As explained in Vite's security note:

  • Never add secret information to PUBLIC_ENV__ environment variables.
  • Consider using .env.local to avoid including secret information to your repository (e.g. if your repository is public on GitHub).