Astro JS - Environment Variables

Environment Variables

The environment variables are key value pairs that store configuration data of application. It is generally used to store sensitive information like API keys, database connection strings, and other secrets. Astro have built-in support for loading environment variables from the .env file to process.env object.

Environment Variables in Astro

Astro uses Vite’s built-in support for environment variables, which are statically replaced at build time, and lets you use any of its methods to work with the. 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.

Example

Consider the following environment variable declaration.

// File: ./.env

PASSWORD=password123
PUBLIC_ANALYTICS_ID=123

In this example, PUBLIC_ANALYTICS_ID (accessible via import.meta.env.PUBLIC _ANALYTICS_ID) will be available in server or client code, while PASSWORD (accessible via import.meta.env.PASSWORD) will be server-side only.

Setting Environment Variables

The environment variables are kept in a file named '.env' in the root directory of the project. The '.env' file is a plain text file that contains key-value pairs of environment variables. Each line in the file is a key-value pair, separated by an equal sign.

# 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"

You can also add .production, .development or a custom mode name to the filename itself (e.g .env.testing, .env.staging). This allows you to use different sets of environment variables at different times.

Using Environment Variables

Environment variables in Astro are accessed with import.meta.env, using the import.meta feature added in ES2020, instead of process.env. 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`);

When using SSR, environment variables can be accessed at runtime based on the SSR adapter being used. With most adapters you can access environment variables with process.env, but some adapters work differently. For the Deno adapter, you will use Deno.env.get(). See how to access the Cloudflare runtime to handle environment variables when using the Cloudflare adapter. Astro will first check the server environment for variables, and if they don’t exist, Astro will look for them in .env files.

Types of Environment Variables

There are three types of environment variable, based on combination of context ("client" or "server") and access ("secret" or "public") settings defined in your schema:

• Public client variables: These are available to the client and are not secret. They are prefixed with PUBLIC_ in your .env file.
• Secret server variables: These are available to the server and are secret. They are not prefixed with PUBLIC_ in your .env file.
• Public server variables: These are available to the server and are not secret. They are prefixed with PUBLIC_ in your .env file.