Environment variable management in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access an environment variable in Remix.

Remix

const apiKey = process.env.[1];

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

AapiKey

BAPI_KEY

CenvKey

DkeyAPI

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase instead of uppercase variable names.

Trying to access environment variables without process.env.

Environment variables are accessed using process.env followed by the exact variable name, which is usually uppercase with underscores.

2fill in blank

medium

Complete the code to load environment variables in a Remix loader function.

Remix

export async function loader() {
  return json({ secret: process.env.[1] });
}

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

ASecret

BsecretKey

CSECRET

Dsecret_key

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase or lowercase names that don't match the environment variable.

Forgetting to prefix with process.env.

Use the exact uppercase environment variable name to access it inside the loader function.

3fill in blank

hard

Fix the error in the code to correctly expose a public environment variable in Remix.

Remix

const publicUrl = process.env.[1];

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

APUBLICURL

Bpublic_url

CPUBLIC-url

DPUBLIC_URL

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or hyphens in environment variable names.

Not prefixing public variables with PUBLIC_.

Remix requires public environment variables to start with PUBLIC_ and be uppercase with underscores.

4fill in blank

hard

Fill both blanks to create a server-only environment variable and access it safely in Remix.

Remix

if (!process.env.[1]) {
  throw new Error('[2] is not set');
}

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

ADATABASE_URL

BAPI_KEY

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in the check and error message.

Trying to access public variables as server-only.

Check for the presence of the server-only environment variable DATABASE_URL and throw an error if missing.

5fill in blank

hard

Fill all three blanks to safely expose a public environment variable in a Remix component.

Remix

export default function Config() {
  const publicApi = process.env.[1];
  return <div>API URL: {publicApi || '[2]'}</div>;
}

// Remember to prefix public variables with [3]

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

APUBLIC_API_URL

BNot set

CPUBLIC_

DAPI_URL

Attempts:

3 left

💡 Hint

Common Mistakes

Not using the PUBLIC_ prefix for public variables.

Not providing a fallback value in the component.

Public environment variables must start with PUBLIC_. The component safely shows the variable or a fallback message.