Environment variables are super important for managing settings across different environments like development, testing, and production. They help keep things secure and flexible by keeping sensitive info like API keys and database URLs out of your codebase.

First, create a .env file in the root directory of your Supabase project. This file will hold all your environment-specific variables.

touch .env

Open up the .env file with your favorite text editor and define your environment variables. For example:

SUPABASE_URL=https://your-supabase-url
SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

Next, you need to load these environment variables in your application code. This step will vary depending on the language and framework you're using. Here are examples for JavaScript/Node.js and Python:

JavaScript/Node.js:

1. Install the dotenv package:

npm install dotenv

1. Load the environment variables at the beginning of your index.js or app.js file:

require('dotenv').config();

const { createClient } = require('@supabase/supabase-js');
const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY);

Python:

1. Install the python-dotenv package:

pip install python-dotenv

1. Load the environment variables at the beginning of your application:

from dotenv import load_dotenv
import os

load_dotenv()

supabase_url = os.getenv("SUPABASE_URL")
supabase_anon_key = os.getenv("SUPABASE_ANON_KEY")

Make sure to add the .env file to your .gitignore file so it doesn't get committed to your version control system.

echo '.env' >> .gitignore

When deploying your app to a cloud service like Vercel, Heroku, or Netlify, you'll need to manually set the environment variables through their dashboards.

For Vercel:

1. Go to your Vercel dashboard.
2. Select your project.
3. Navigate to the Settings tab and then to the Environment Variables section.
4. Add your environment variables.

For Heroku:

1. Go to your Heroku dashboard.
2. Select your project.
3. Navigate to the Settings tab.
4. Click on Reveal Config Vars and add your environment variables.

For Netlify:

1. Go to your Netlify dashboard.
2. Select your site.
3. Navigate to the Site settings > Build & deploy > Environment > Environment variables.
4. Add your environment variables.

After setting up your environment variables, run your application to make sure they're being loaded correctly. Check that the app can successfully connect to your Supabase backend and do what it's supposed to do.

By following these steps, you can manage environment variables in a Supabase project effectively, ensuring security and configuration flexibility across different environments.