Handling environment variables in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access an environment variable in Astro.

Astro

const apiKey = import.meta.env.[1];

Drag options to blanks, or click blank then click option'

AAPI_KEY

BSECRET_KEY

CPUBLIC_API_KEY

DENV_API_KEY

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access environment variables without the PUBLIC_ prefix.

Using process.env instead of import.meta.env.

In Astro, environment variables that start with PUBLIC_ are exposed to the client and accessed via import.meta.env.PUBLIC_API_KEY.

2fill in blank

medium

Complete the code to safely use an environment variable with a fallback value.

Astro

const apiUrl = import.meta.env.PUBLIC_API_URL || [1];

Drag options to blanks, or click blank then click option'

Aundefined

B"https://default.api.com"

Cnull

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as fallback which can cause errors when used as a URL.

Not providing a fallback and risking runtime errors.

Using the logical OR operator || allows setting a fallback URL if the environment variable is not defined.

3fill in blank

hard

Fix the error in accessing a private environment variable in Astro.

Astro

const secret = import.meta.env.[1];

Drag options to blanks, or click blank then click option'

APUBLIC_SECRET

BPUBLIC_API_KEY

CSECRET_KEY

DPRIVATE_SECRET

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access private environment variables on the client side.

Using variable names without the PUBLIC_ prefix.

Only environment variables prefixed with PUBLIC_ are accessible in client-side Astro code. Private variables are not exposed.

4fill in blank

hard

Fill both blanks to create a server-side environment variable access with fallback.

Astro

const dbPassword = process.env.[1] || [2];

Drag options to blanks, or click blank then click option'

ADB_PASSWORD

B"defaultPass123"

C"fallbackPass"

DDATABASE_PASS

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-side import.meta.env syntax on the server.

Not providing a fallback value.

Server-side environment variables are accessed via process.env. Providing a fallback string ensures the code works if the variable is missing.

5fill in blank

hard

Fill all three blanks to destructure and use environment variables in Astro.

Astro

const { [1], [2] } = import.meta.env;
const apiKey = [3] || "defaultKey";

Drag options to blanks, or click blank then click option'

APUBLIC_API_KEY

BPUBLIC_API_URL

CPUBLIC_SECRET

DPRIVATE_KEY

Attempts:

3 left

💡 Hint

Common Mistakes

Including private variables in destructuring.

Using variable names inconsistently.

Destructuring import.meta.env allows easy access to multiple public environment variables. Use the destructured variable for fallback logic.