Skip to content

Supabase Environment Variables Setup Guide

Problem

The frontend requires VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY at build time (not runtime). If these are missing during the build, the application will fail with: 

Uncaught Error: VITE_SUPABASE_URL environment variable is required

Solution

For GitHub Actions (Hostinger Deployment) ✅ FIXED

The workflow has been updated to include these variables. You need to add them as GitHub Secrets:

  1. Go to your GitHub repository: https://github.com/magiccadai/AI-assisted-PCB-stackup-generator
  2. Click Settings → Secrets and variables → Actions
  3. Click New repository secret and add:

Secret 1: - Name: VITE_SUPABASE_URL - Value: https://orjmlibnlzkyuauaysye.supabase.co (or your Supabase URL)

Secret 2: - Name: VITE_SUPABASE_ANON_KEY - Value: Your Supabase anonymous key (from Supabase dashboard)

  1. The workflow will automatically use these during the build

For Render Deployment

If you're building the frontend on Render, you need to set these as Environment Variables in your Render dashboard:

  1. Go to https://dashboard.render.com
  2. Select your frontend service (if you have one)
  3. Go to Environment tab
  4. Add these environment variables:

Variable 1: - Key: VITE_SUPABASE_URL - Value: https://orjmlibnlzkyuauaysye.supabase.co

Variable 2: - Key: VITE_SUPABASE_ANON_KEY - Value: Your Supabase anonymous key

  1. Important: After adding variables, you must redeploy the service for them to take effect

For Local Development

Create a .env file in the repo-root directory (Vite reads the root .env via envDir: rootDir in frontend/vite.config.ts; a frontend/.env is ignored and is deleted by the start script):

VITE_SUPABASE_URL=https://orjmlibnlzkyuauaysye.supabase.co
VITE_SUPABASE_ANON_KEY=your_anon_key_here

How to Get Your Supabase Keys

  1. Go to your Supabase project dashboard: https://supabase.com/dashboard
  2. Select your project
  3. Go to Settings → API
  4. Find:
  5. Project URL → This is your VITE_SUPABASE_URL
  6. anon/public key → This is your VITE_SUPABASE_ANON_KEY

Important Notes

  • ⚠️ Vite environment variables must start with VITE_ to be included in the frontend bundle
  • ⚠️ These variables are embedded at BUILD TIME, not runtime
  • ⚠️ After changing environment variables, you must rebuild/redeploy
  • ✅ These are public keys - safe to expose in frontend code (Row Level Security protects your data)

Verification

After setting up, verify the build includes the variables:

  1. Check the build logs for any errors about missing variables
  2. In the browser console, you should NOT see the error about VITE_SUPABASE_URL
  3. The Supabase client should initialize successfully