Handling environment variables in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of environment variables in Astro projects?

Environment variables store configuration values outside the code. They help keep secrets safe and allow different settings for development and production.

beginner

How do you access environment variables in Astro components?

Use the special import from 'astro:env' like <code>import { PUBLIC_API_URL } from 'astro:env';</code> to safely access variables starting with <code>PUBLIC_</code>.

beginner

Why should secret environment variables NOT start with PUBLIC_ in Astro?

Variables starting with PUBLIC_ are exposed to client-side code. Secrets must not be exposed to keep them safe on the server only.

beginner

Where do you define environment variables for an Astro project?

Create a .env file in the project root. Write variables like API_KEY=your_key_here. Use .env.production for production settings.

intermediate

How does Astro handle environment variables during build and runtime?

Astro replaces environment variables at build time. Public variables are embedded in client code, while private ones stay on the server during build.

Which prefix must environment variables have to be accessible in Astro client-side code?

A PRIVATE_

B CLIENT_

C ASTRO_

D PUBLIC_

Only variables starting with PUBLIC_ are exposed to client-side code in Astro.

Where should you store secret keys in an Astro project?

A Directly in client-side JavaScript

B In variables starting with PUBLIC_

C In .env files without PUBLIC_ prefix

D In HTML meta tags

Secrets should be stored in .env files without the PUBLIC_ prefix to keep them server-only.

How do you import environment variables in Astro components?

A import env from 'env';

B import { VAR_NAME } from 'astro:env';

C const VAR_NAME = process.env.VAR_NAME;

D import { VAR_NAME } from 'process';

Astro uses import { VAR_NAME } from 'astro:env' to access environment variables.

What file name is used for production environment variables in Astro?

A .env.production

B .env.prod

C .env.production.local

D .env.prod.local

Astro uses .env.production for production environment variables.

What happens to environment variables during Astro's build process?

A They are replaced with their values at build time

B They remain as placeholders in the code

C They are encrypted and sent to the client

D They are ignored

Astro replaces environment variables with their actual values during build time.

Explain how to safely use environment variables in an Astro project for both server and client code.

Think about how to separate public and private data.

Describe the role of environment variables during Astro's build process and why it matters.

Consider what happens before the site is served.