How to Use .env File in Remix for Environment Variables

In Remix, you use a .env file to store environment variables and access them via process.env. To expose variables to the client, prefix them with PUBLIC_ and use process.env.PUBLIC_YOUR_VAR in your code.

Syntax

A .env file contains key-value pairs for environment variables, each on its own line. Variables are accessed in Remix using process.env.VARIABLE_NAME. To make a variable available in client-side code, prefix it with PUBLIC_.

• KEY=VALUE: Defines a variable.
• process.env.KEY: Accesses the variable in server code.
• process.env.PUBLIC_KEY: Accesses the variable in client code.

env

API_KEY=12345
PUBLIC_API_URL=https://api.example.com

Example

This example shows how to define environment variables in a .env file and use them in a Remix loader and component. The PUBLIC_API_URL is accessible in the client, while API_KEY is only on the server.

typescript

/* .env file */
API_KEY=secret123
PUBLIC_API_URL=https://api.example.com

// app/routes/index.tsx
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export const loader = async () => {
  // Access server-only variable
  const apiKey = process.env.API_KEY;
  // Access public variable
  const apiUrl = process.env.PUBLIC_API_URL;
  return json({ apiKey, apiUrl });
};

export default function Index() {
  const data = useLoaderData();
  return (
    <main>
      <h1>Environment Variables in Remix</h1>
      <p>Public API URL: {data.apiUrl}</p>
      <p>Server API Key: {data.apiKey ? "[hidden for security]" : "Not set"}</p>
    </main>
  );
}

Output

<main>
  <h1>Environment Variables in Remix</h1>
  <p>Public API URL: https://api.example.com</p>
  <p>Server API Key: [hidden for security]</p>
</main>

Common Pitfalls

• Not restarting the Remix dev server after changing .env files, so changes don’t take effect.
• Trying to access server-only variables in client code without the PUBLIC_ prefix, causing undefined values.
• Committing .env files with secrets to public repositories, risking security leaks.
• Forgetting to add .env to .gitignore to keep secrets safe.

javascript

/* Wrong: Trying to use server-only variable in client code */
console.log(process.env.API_KEY); // undefined in browser

/* Right: Use PUBLIC_ prefix for client variables */
console.log(process.env.PUBLIC_API_URL); // works in browser

Quick Reference

Keep these tips in mind when using .env files in Remix:

• Prefix client variables with PUBLIC_.
• Restart the server after changes.
• Never expose secrets to the client.
• Add .env to .gitignore.
• Access variables with process.env.VAR_NAME.

Key Takeaways

Use a .env file to store environment variables and access them with process.env in Remix.

Prefix variables with PUBLIC_ to expose them safely to client-side code.

Always restart the Remix server after editing .env files to apply changes.

Never commit .env files with secrets to public repositories; use .gitignore.

Access server-only variables only on the server to keep secrets secure.