Environment variable management in Remix - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of environment variables in Remix?

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

beginner

How do you access environment variables in a Remix loader function?

You can access environment variables using process.env.VARIABLE_NAME inside loader functions because they run on the server.

intermediate

Why should you prefix environment variables with PUBLIC_ in Remix apps?

Only variables prefixed with PUBLIC_ are exposed to the client-side code. This protects other variables from being leaked to the browser.

beginner

Where do you define environment variables for Remix during local development?

You define them in a .env file at the root of your project. Remix loads these variables automatically when you run the app locally.

intermediate

How can you safely use secret keys in Remix without exposing them to the client?

Keep secret keys in environment variables without the PUBLIC_ prefix. Use them only in server code like loaders or actions, never in client code.

Which environment variable prefix exposes the variable to client-side code in Remix?

A APP_

B REACT_

C NODE_

D PUBLIC_

Only variables starting with PUBLIC_ are sent to the client in Remix apps.

Where should you store secret API keys in a Remix app?

A Directly in client-side code

B In variables with PUBLIC_ prefix

C In variables without PUBLIC_ prefix

D In public JSON files

Secrets should be stored in environment variables without PUBLIC_ prefix to keep them server-only.

How do you load environment variables during local development in Remix?

A From a config.json file

B From a .env file at project root

C From the browser localStorage

D From a database

Remix automatically loads variables from a .env file during local development.

Which Remix code can safely access environment variables without PUBLIC_ prefix?

A Server-side loaders and actions

B Client-side React components

C Browser console scripts

D Static HTML files

Server-side code like loaders and actions can access all environment variables safely.

What happens if you try to use a non-prefixed environment variable in client code?

A It will be undefined or not available

B It will be exposed to the client

C It will cause a build error

D It will be encrypted automatically

Non-prefixed variables are not exposed to client code and will be undefined there.

Explain how Remix manages environment variables for client and server code.

Think about how Remix separates client and server environment variables.

Describe best practices for keeping secret keys safe in a Remix app.

Focus on how to avoid leaking secrets to the browser.