Using environment variables
Astro uses Vite for environment variables, and allows you to use any of its methods to get and set environment variables. Note that all environment variables must be prefixed with
PUBLIC_ to be accessible by client side code.
The ability to access private variables on the server side is still being discussed.
Setting environment variables
dotenv by default, allowing you to easily set environment variables without any extra configuration in Astro projects. You can also attach a mode (either
development) to the filename, like
.env.development, which makes the environment variables only take effect in that mode.
Just create a
.env file in the project directory and add some variables to it.
# .env PUBLIC_POKEAPI="https://pokeapi.co/api/v2"
Getting environment variables
Instead of using
process.env, with Vite you use
import.meta.env, which uses the
import.meta feature added in ES2020 (don’t worry about browser support though, Vite replaces all
import.meta.env mentions with static values). For example, to get the
PUBLIC_POKEAPI environment variable, you could use
⚠️WARNING⚠️: Because Vite statically replaces
import.meta.env, you cannot access it with dynamic keys like