Skip to main content
The Bookmarks application requires several environment variables to connect to Supabase services. All variables use the VITE_ prefix as this is a Vite-based React application.

​
Required Environment Variables

Environment variables in Vite must be prefixed with VITE_ to be exposed to the client-side code.

​
Core Supabase Configuration

These variables are required for basic Supabase client functionality:
.env
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
1

Get Supabase URL

Navigate to your Supabase project settings and copy the Project URL from the API section.Example format: https://your-project-id.supabase.co
2

Get Anon Key

In the same API settings page, copy the anon public key. This key is safe to use in client-side code.Used in: /src/utils/supabase.ts:3-4

​
Edge Function Configuration

The application uses Supabase Edge Functions for metadata extraction and AI-powered tag generation:
.env
VITE_SUPABASE_EF_ANON_KEY=your_edge_function_anon_key
VITE_SUPABASE_META_URL=your_metadata_function_url
VITE_SUPABASE_GENERATE_TAGS_URL=your_generate_tags_function_url
1

Edge Function Anon Key

This is typically the same as your VITE_SUPABASE_ANON_KEY unless you have separate authentication for Edge Functions.Used in: /src/utils/getMetadata.ts:2
2

Metadata Function URL

The URL endpoint for the Edge Function that fetches website metadata (title, description, images).Format: https://your-project-id.supabase.co/functions/v1/get-metadataUsed in: /src/utils/getMetadata.ts:1,6
3

Generate Tags Function URL

The URL endpoint for the Edge Function that uses AI to generate smart tags for bookmarks.Format: https://your-project-id.supabase.co/functions/v1/generate-tagsUsed in: /src/utils/generateTags.ts:1,6

​
Environment File Setup

# Supabase Core Configuration
VITE_SUPABASE_URL=https://xxxxxxxxxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Supabase Edge Functions
VITE_SUPABASE_EF_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
VITE_SUPABASE_META_URL=https://xxxxxxxxxxxxx.supabase.co/functions/v1/get-metadata
VITE_SUPABASE_GENERATE_TAGS_URL=https://xxxxxxxxxxxxx.supabase.co/functions/v1/generate-tags
Never commit your .env.local file to version control. The .gitignore file should include .env*.local to prevent accidental commits.

​
Verifying Configuration

After setting up your environment variables, verify they’re accessible:
1

Start Development Server

npm run dev
2

Check Browser Console

Open your browser’s developer console and verify no Supabase connection errors appear.
3

Test Authentication

Try signing in to ensure the Supabase client is properly configured.

​
Production Deployment

When deploying to production platforms like Vercel or Netlify, add these environment variables in your deployment platform’s dashboard:
For deployment-specific instructions, see the Deployment Guide.

​
Platform-Specific Notes

Vercel:
  • Add variables in Project Settings > Environment Variables
  • Variables are automatically available during build and runtime
Netlify:
  • Add variables in Site Settings > Environment Variables
  • Ensure variables are set for the production environment

​
Troubleshooting

  • Ensure your .env.local file is in the project root
  • Restart the Vite development server after adding new variables
  • Verify variables are prefixed with VITE_
  • Double-check your VITE_SUPABASE_URL format
  • Verify the anon key is copied completely without line breaks
  • Ensure your Supabase project is active and not paused
  • Confirm Edge Functions are deployed in your Supabase project
  • Verify the function URLs match your deployed function names
  • Check that the Edge Function anon key has proper permissions

Build docs developers (and LLMs) love

Get started for freeTalk to us