Environment variable management in Remix

Introduction

Environment variables help keep secret keys and settings safe and separate from your code. They let your app change behavior without changing code.

You want to keep API keys secret and not share them in your code.

You need different settings for development and production servers.

You want to change database connection info without editing code.

You want to toggle features on or off without redeploying.

You want to keep sensitive info out of your public code repository.

Syntax

Remix

process.env.VARIABLE_NAME

Use process.env to access environment variables in Remix server code.

Variables must be defined in a .env file or your hosting environment.

Examples

Access the API key stored in environment variables.

Remix

const apiKey = process.env.API_KEY;

Get the current environment or default to 'development'.

Remix

const nodeEnv = process.env.NODE_ENV || 'development';

Use environment variables to toggle features on or off.

Remix

if (process.env.FEATURE_FLAG === 'true') {
  // enable feature
}

Sample Program

This Remix loader reads the API_URL environment variable and passes it to the component via loader data. It shows how to provide a default if the variable is missing.

Remix

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export const loader = async () => {
  const apiUrl = process.env.API_URL || 'https://default.api';
  return json({ apiUrl });
};

export default function EnvExample() {
  const { apiUrl } = useLoaderData();
  return (
    <main>
      <h1>Environment Variable Example</h1>
      <p>API URL: {apiUrl}</p>
    </main>
  );
}

Important Notes

Remember to restart your Remix server after changing environment variables.

Never expose secret environment variables to client-side code directly.

Use .env files for local development and set variables in your hosting platform for production.

Summary

Environment variables keep secrets and settings outside your code.

Access them in Remix using process.env.VARIABLE_NAME.

Always provide defaults and avoid exposing secrets to the browser.