Using environment variables
Astro uses Vite’s built-in support for environment variables, and lets you use any of its methods to work with them.
Note that while all environment variables are available in server-side code, only environment variables prefixed with PUBLIC_
are available in client-side code for security purposes.
SECRET_PASSWORD=password123
PUBLIC_ANYBODY=there
In this example, PUBLIC_ANYBODY
(accessible via import.meta.env.PUBLIC_ANYBODY
) will be available in server or client code, while SECRET_PASSWORD
(accessible via import.meta.env.SECRET_PASSWORD
) will be server-side only.
Default environment variables
Section titled Default environment variablesAstro includes a few environment variables out-of-the-box:
import.meta.env.MODE
: The mode your site is running in. This isdevelopment
when runningastro dev
andproduction
when runningastro build
.import.meta.env.PROD
:true
if your site is running in production;false
otherwise.import.meta.env.DEV
:true
if your site is running in development;false
otherwise. Always the opposite ofimport.meta.env.PROD
.import.meta.env.BASE_URL
: The base url your site is being served from. This is determined by thebase
config option.import.meta.env.SITE
: This is set to the thesite
option specified in your project’sastro.config
.
Setting environment variables
Section titled Setting environment variables.env
files
Section titled .env filesEnvironment variables can be loaded from .env
files in your project directory.
You can also attach a mode (either production
or development
) to the filename, like .env.production
or .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.
# This will only be available when run on the server!
DB_PASSWORD="foobar"
# This will be available everywhere!
PUBLIC_POKEAPI="https://pokeapi.co/api/v2"
For more on .env
files, see the Vite documentation.
Using the CLI
Section titled Using the CLIYou can also add environment variables as you run your project:
POKEAPI=https://pokeapi.co/api/v2 npm run dev
POKEAPI=https://pokeapi.co/api/v2 pnpm run dev
POKEAPI=https://pokeapi.co/api/v2 yarn run dev
Getting environment variables
Section titled Getting environment variablesInstead of using process.env
, with Vite you use import.meta.env
, which uses the import.meta
feature added in ES2020.
For example, use import.meta.env.PUBLIC_POKEAPI
to get the PUBLIC_POKEAPI
environment variable.
// When import.meta.env.SSR === true
const data = await db(import.meta.env.DB_PASSWORD);
// When import.meta.env.SSR === false
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);
IntelliSense for TypeScript
Section titled IntelliSense for TypeScriptBy default, Astro provides type definition for import.meta.env
in astro/client.d.ts
.
While you can define more custom env variables in .env.[mode]
files, you may want to get TypeScript IntelliSense for user-defined env variables which are prefixed with PUBLIC_
.
To achieve this, you can create an env.d.ts
in src/
and configure ImportMetaEnv
like this:
interface ImportMetaEnv {
readonly DB_PASSWORD: string;
readonly PUBLIC_POKEAPI: string;
// more env variables...
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}