Skip to main content
VSM Store uses Vite’s import.meta.env system for environment variables. All variables exposed to the browser must be prefixed with VITE_. Copy .env.example to .env at the project root:
cp .env.example .env

Environment Variables

VITE_SUPABASE_URL
string
required
The base URL of your Supabase project. Found in Supabase Dashboard → Project Settings → API → Project URL.
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY
string
required
The anonymous (public) API key for your Supabase project. Found in Supabase Dashboard → Project Settings → API → Project API Keys → anon public.
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
This key is safe to expose in client-side code. Row Level Security (RLS) policies on every table enforce access control at the database level.
VITE_SENTRY_DSN
string
Data Source Name for Sentry error monitoring. When present, Sentry initializes automatically in production via initMonitoring() in main.tsx. Omit this variable entirely to disable Sentry.
VITE_SENTRY_DSN=https://[email protected]/0
Sentry is configured with:
  • tracesSampleRate: 1.0 — 100% of transactions traced
  • replaysOnErrorSampleRate: 1.0 — full session replay on every error
  • browserTracingIntegration + replayIntegration

Configuration Validation

src/lib/supabase.ts exports an isSupabaseConfigured boolean that checks both variables at module load time:
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const isSupabaseConfigured = !!supabaseUrl && !!supabaseAnonKey;
If either variable is missing, App.tsx renders an error screen instead of mounting the application:
if (!isSupabaseConfigured) {
    return (
        <div className="flex min-h-screen flex-col items-center justify-center bg-theme-primary p-4 text-center text-white">
            <div className="rounded-xl bg-red-500/10 p-8 border border-red-500/20 max-w-md">
                <h1 className="mb-4 text-2xl font-bold text-red-400">Error de Configuración</h1>
                <p className="mb-6 text-theme-secondary">
                    No se ha configurado la conexión con Supabase.
                </p>
                <div className="text-left text-sm bg-black/30 p-4 rounded-lg font-mono text-theme-secondary">
                    <p>Crea un archivo <span className="text-white">.env</span> en la raíz del proyecto con:</p>
                    <ul className="list-disc pl-4 mt-2 space-y-1">
                        <li>VITE_SUPABASE_URL</li>
                        <li>VITE_SUPABASE_ANON_KEY</li>
                    </ul>
                </div>
            </div>
        </div>
    );
}
This prevents cryptic runtime crashes — any misconfiguration is surfaced immediately on first load.

Production: Cloudflare Pages

VSM Store is hosted on Cloudflare Pages at vsm-store.pages.dev. Environment variables are set in the Cloudflare dashboard, not in committed files.
1

Open your Pages project

In the Cloudflare dashboard, go to Workers & Pages and select your VSM Store project.
2

Navigate to Environment Variables

Go to Settings → Environment Variables.
3

Add variables for Production

Add each variable under the Production environment:
VariableValue
VITE_SUPABASE_URLYour Supabase project URL
VITE_SUPABASE_ANON_KEYYour Supabase anon key
VITE_SENTRY_DSNYour Sentry DSN (optional)
4

Redeploy

Trigger a new deploy after saving. Cloudflare injects the variables at build time so Vite can embed them in the bundle.
Never commit your .env file. It is listed in .gitignore. Only .env.example (with placeholder values) should be tracked in version control.

Supabase Edge Function Secrets

The AI Edge Functions require additional secrets set directly on the Supabase project (not in .env):
# Set via Supabase CLI
npx supabase secrets set GEMINI_API_KEY=your-key
npx supabase secrets set SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
See the Supabase documentation for managing function secrets.

Build docs developers (and LLMs) love