Packages
volt
0.20.0
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.1
0.18.0
0.17.11
0.17.10
0.17.9
0.17.8
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.12
0.14.11
0.14.10
0.14.9
0.14.8
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.13.1
0.13.0
0.12.0
0.11.3
0.11.2
0.11.1
0.11.0
0.10.9
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.2
0.9.1
0.9.0
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.1
0.7.0
0.6.5
0.6.4
0.6.3
0.6.2
0.6.1
0.6.0
0.5.0
0.4.3
0.4.2
0.4.1
0.4.0
0.3.0
0.2.0
0.1.0
Elixir-native frontend build tool — dev server, HMR, and production builds powered by OXC and Vize.
Current section
Files
Jump to
Current section
Files
guides/features/environment-variables.md
# Environment Variables
## `.env` Files
Create `.env` files in your project root:
```
VOLT_API_URL=https://api.example.com
VOLT_DEBUG=true
```
Only variables prefixed with `VOLT_` are exposed to client code by default.
## Accessing Variables
```javascript
console.log(import.meta.env.VOLT_API_URL)
console.log(import.meta.env.MODE) // "development" or "production"
console.log(import.meta.env.DEV) // true/false
console.log(import.meta.env.PROD) // true/false
```
## Env Prefix
Configure `env_prefix` when migrating from Vite or when your app already uses a different public-env naming convention:
```elixir
config :volt, env_prefix: "VITE_"
```
Multiple prefixes are also supported:
```elixir
config :volt, env_prefix: ["VOLT_", "PUBLIC_"]
```
## TypeScript
Volt's client types declare `import.meta.env` with `MODE`, `DEV`, `PROD`, and any other key as `string | boolean | undefined`. `mix igniter.install volt` adds them to `tsconfig.json`; to add them by hand, include `deps/volt/priv/types/client/**/*.d.ts`.
Declare your own variables to get exact types and completion:
```ts
// assets/env.d.ts
interface ImportMetaEnv {
readonly VOLT_API_URL: string
}
```
## File Loading Order
Files are loaded in order, with later files overriding earlier ones:
1. `.env`
2. `.env.local`
3. `.env.{mode}` (e.g. `.env.production`)
4. `.env.{mode}.local`
The mode defaults to `"production"` for `mix volt.build` and `"development"` for the dev server. Override with `--mode`.
> #### Security {: .warning}
>
> Environment variables are embedded into the built JavaScript at compile time. Never put secrets or API keys in variables matching `env_prefix` — they will be visible in the client bundle.