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
.envfiles 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
| Concept | Usage | Notes |
|---|---|---|
| Server-side variable | process.env.SECRET_KEY | Accessible only on server |
| Client-side variable | process.env.PUBLIC_API_KEY | Must start with PUBLIC_ prefix |
| .env file | KEY=value | Store variables locally, not committed to git |
| dotenv package | dotenv.config() | Load .env variables in development |
| Passing to client | Use loader to send public vars | Avoid 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.