Skip to main content

​
Overview

Portal Ciudadano Manta uses environment variables to configure the connection to Supabase backend services.
Never commit .env files to version control. Always use platform-specific environment variable configuration in production.

​
Required Variables

​
VITE_SUPABASE_URL

Description: Your Supabase project URL Format: https://your-project-id.supabase.co Example: 
VITE_SUPABASE_URL=https://xyzcompany.supabase.co
Where to find:
  1. Go to Supabase Dashboard
  2. Select your project
  3. Navigate to Settings → API
  4. Copy the “Project URL”

​
VITE_SUPABASE_ANON_KEY

Description: Your Supabase anonymous (public) key Format: JWT token string (starts with eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9) Example: 
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRlc3QiLCJyb2xlIjoiYW5vbiIsImlhdCI6MTY0ODc0MDAwMH0.xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Where to find:
  1. Go to Supabase Dashboard
  2. Select your project
  3. Navigate to Settings → API
  4. Copy the “anon” key under “Project API keys”
The anon key is safe to use in client-side code. Row Level Security (RLS) policies protect your data.

​
Local Development Setup

1

Create .env file

In your project root, create a .env file:
touch .env
2

Add variables

Add your Supabase credentials:
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here
3

Verify .gitignore

Ensure .env is in your .gitignore:
# .gitignore
.env
.env.local
.env.*.local
4

Restart dev server

npm run dev

​
Production Configuration

​
Netlify

1

Navigate to Site Settings

Go to your site in Netlify dashboard → Site settings → Environment variables
2

Add Variables

Click “Add a variable” for each:
  • Key: VITE_SUPABASE_URL
  • Value: Your Supabase URL
  • Key: VITE_SUPABASE_ANON_KEY
  • Value: Your Supabase anon key
3

Redeploy

Trigger a new deployment or push to your repository

​
Vercel

1

Navigate to Project Settings

Go to your project in Vercel dashboard → Settings → Environment Variables
2

Add Variables

For each variable:
  1. Enter the key name (e.g., VITE_SUPABASE_URL)
  2. Enter the value
  3. Select environments: Production, Preview, Development
  4. Click “Save”
3

Redeploy

Go to Deployments → Select latest → Redeploy

​
Environment Validation

The application validates environment variables on startup: 
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
  console.warn(
    '⚠️ Faltan las credenciales de Supabase. Por favor, configura VITE_SUPABASE_URL y VITE_SUPABASE_ANON_KEY en tu archivo .env'
  );
}
Location: src/lib/supabase.ts:6
If you see the warning message in console, your environment variables are not configured correctly.

​
Using Environment Variables

Access variables in your code using import.meta.env: 
// ✅ Correct - Vite environment variables
const apiUrl = import.meta.env.VITE_SUPABASE_URL;

// ❌ Wrong - Node.js syntax (doesn't work in Vite)
const apiUrl = process.env.VITE_SUPABASE_URL;
All client-side environment variables in Vite must be prefixed with VITE_ to be exposed to your application.

​
Troubleshooting

​
Variables Not Loading

Problem: import.meta.env.VITE_SUPABASE_URL returns undefined Solutions:
  1. Ensure variable names start with VITE_
  2. Restart your development server after adding variables
  3. Check .env file is in project root
  4. Verify .env file syntax (no spaces around =)

​
Connection Errors

Problem: “Failed to fetch” or CORS errors Solutions:
  1. Verify URL format is correct (includes https://)
  2. Check Supabase project is active (not paused)
  3. Verify API key is the “anon” key, not “service_role”

​
Authentication Fails

Problem: Users can’t sign up or log in Solutions:
  1. Check Site URL in Supabase Authentication settings
  2. Add redirect URLs for your domain
  3. Verify email provider is enabled in Supabase

​
Security Best Practices

Never Commit

Don’t commit .env files to version control

Use RLS

Always enable Row Level Security policies

Rotate Keys

Rotate keys if accidentally exposed

Platform Variables

Use platform environment variables in production

​
Next Steps

Supabase Setup

Complete Supabase configuration

Deploy to Netlify

Deploy with environment variables

Build docs developers (and LLMs) love

Get started for freeTalk to us