0
0
RemixHow-ToBeginner ยท 4 min read

How to Use Environment Variables in Remix Framework

In Remix, use process.env.VARIABLE_NAME to access environment variables on the server side. Define variables in a .env file and load them with dotenv or your deployment platform. For client-side use, prefix variables with PUBLIC_ and access them via process.env.PUBLIC_VARIABLE_NAME.
๐Ÿ“

Syntax

Environment variables in Remix are accessed using process.env.VARIABLE_NAME on the server side. Variables meant for client-side code must start with PUBLIC_ to be exposed safely.

Example parts:

  • process.env: Node.js object holding environment variables.
  • VARIABLE_NAME: The name of your environment variable.
  • PUBLIC_ prefix: Marks variables safe for client-side use.
javascript
const secret = process.env.SECRET_KEY;
const publicApiKey = process.env.PUBLIC_API_KEY;
๐Ÿ’ป

Example

This example shows how to load environment variables from a .env file and use them in a Remix loader function. The secret variable is only available server-side, while the public variable can be sent to the client.

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

dotenv.config();

export const loader = async () => {
  // Server-side secret
  const secret = process.env.SECRET_KEY || 'no-secret';

  // Public variable sent to client
  const publicApiKey = process.env.PUBLIC_API_KEY || 'no-public-key';

  return json({ publicApiKey });
};

export default function Index() {
  const data = useLoaderData();
  return (
    <div>
      <h1>Public API Key:</h1>
      <p>{data.publicApiKey}</p>
    </div>
  );
}
Output
<h1>Public API Key:</h1> <p>12345-public-key</p>
โš ๏ธ

Common Pitfalls

Common mistakes when using environment variables in Remix include:

  • Not prefixing client-side variables with PUBLIC_, causing them to be undefined in the browser.
  • Trying to access server-only variables in client code, which will be undefined.
  • Forgetting to load variables with dotenv.config() during development.
  • Committing .env files with secrets to version control.
javascript
/* Wrong: Trying to use server secret in client component */
export default function Component() {
  return <p>{process.env.SECRET_KEY}</p>; // undefined in browser
}

/* Right: Use loader to pass public variables only */
export const loader = () => {
  return { publicKey: process.env.PUBLIC_API_KEY };
};
๐Ÿ“Š

Quick Reference

ConceptUsageNotes
Server-side variableprocess.env.SECRET_KEYAccessible only on server
Client-side variableprocess.env.PUBLIC_API_KEYMust start with PUBLIC_ prefix
.env fileKEY=valueStore variables locally, not committed to git
dotenv packagedotenv.config()Load .env variables in development
Passing to clientUse loader to send public varsAvoid exposing secrets
โœ…

Key Takeaways

Use process.env.VARIABLE_NAME to access environment variables in Remix server code.
Prefix variables with PUBLIC_ to expose them safely to client-side code.
Load variables from a .env file using dotenv.config() during development.
Never expose secret keys to the client; pass only public variables via loaders.
Keep .env files out of version control to protect sensitive data.