Environment variable management in Remix - Mini Project: Build & Apply

Environment variable management

📖 Scenario: You are building a Remix app that needs to use environment variables to store sensitive data like API keys. This helps keep secrets safe and separate from your code.

🎯 Goal: Create a Remix app setup that reads environment variables correctly and uses them in the app code.

📋 What You'll Learn

Create a .env file with specific environment variables

Load environment variables in Remix using process.env

Use a config file to export environment variables safely

Access environment variables in a Remix route component

💡 Why This Matters

🌍 Real World

Environment variables keep sensitive data like API keys safe and separate from code. This is essential for real-world apps to avoid exposing secrets.

💼 Career

Knowing how to manage environment variables is a key skill for backend and full-stack developers working with modern frameworks like Remix.

1

Create a .env file with variables

Create a .env file in your project root with these exact entries: API_KEY=12345abcde and API_URL=https://api.example.com

Remix

# Create a .env file with API_KEY=12345abcde and API_URL=https://api.example.com

Hint

The .env file should be in the root folder and contain key=value pairs.

2

Create a config file to export env variables

Create a file app/config/env.server.ts that imports process.env and exports constants API_KEY and API_URL from process.env.API_KEY and process.env.API_URL respectively.

Remix

export const API_KEY = process.env.API_KEY;
export const API_URL = process.env.API_URL;
// Your code here

Hint

Use export const to make variables available to other files.

3

Import and use env variables in a route

In app/routes/index.tsx, import API_KEY and API_URL from ../config/env.server. Then create a React component that renders a <div> showing the text API Key: {API_KEY} and API URL: {API_URL}.

Remix

import { API_KEY, API_URL } from '../config/env.server';

export default function Index() {
  return (
    
      {/* Your code here */}
    
  );
}

Hint

Use JSX inside the return statement to display the variables.

4

Add environment variable type safety

In app/config/env.server.ts, add a check that throws an error if API_KEY or API_URL is missing from process.env. Use if (!API_KEY) throw new Error('Missing API_KEY'); and similarly for API_URL.

Remix

const API_KEY = process.env.API_KEY;
const API_URL = process.env.API_URL;

// Add checks for missing env variables below

export { API_KEY, API_URL };

Hint

This ensures your app fails early if environment variables are not set.