Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Hazielgmz/astro-Portfolio/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The Astro Portfolio requires environment variables to connect to your Supabase backend database. These credentials should be stored in a .env file that is never committed to version control.

​
Required Variables

​
SUPABASE_URL

Your Supabase project URL. Format: https://your-project-id.supabase.co Where to find it:
  1. Open your Supabase Dashboard
  2. Select your project
  3. Go to Project Settings → API
  4. Copy the Project URL

​
SUPABASE_KEY

Your Supabase anonymous/public API key. Format: A long alphanumeric string (JWT token) Where to find it:
  1. Open your Supabase Dashboard
  2. Select your project
  3. Go to Project Settings → API
  4. Copy the anon/public key (NOT the service role key)

​
Setup Instructions

​
Step 1: Create .env File

In the root of your project (same directory as package.json), create a .env file: 
touch .env

​
Step 2: Add Your Credentials

Add the following to your .env file: 
SUPABASE_URL=https://your-project-id.supabase.co
SUPABASE_KEY=your-anon-key-here
Example: 
SUPABASE_URL=https://abcdefghijklmnop.supabase.co
SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFiY2RlZmdoaWprbG1ub3AiLCJyb2xlIjoiYW5vbiIsImlhdCI6MTYyMzg3NzY4MiwiZXhwIjoxOTM5NDUzNjgyfQ.example-signature-here

​
Step 3: Verify .gitignore

Ensure .env is listed in your .gitignore file to prevent accidentally committing secrets: 
# .gitignore
.env
.env.production
Never commit your .env file to Git. The portfolio’s .gitignore already excludes it, but always double-check before pushing to a repository.

​
Usage in Code

The environment variables are accessed using Astro’s import.meta.env API: 
// src/db/supabase.js
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.SUPABASE_URL;
const supabaseKey = import.meta.env.SUPABASE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

​
In Astro Components

---
import { supabase } from "../db/supabase";

const { data: aboutMe, error } = await supabase
  .from("about_me")
  .select("*")
  .single();
---

​
Environment-Specific Configuration

​
Development

Use .env for local development: 
# .env (local development)
SUPABASE_URL=https://dev-project.supabase.co
SUPABASE_KEY=dev-anon-key

​
Production

For production deployments, set environment variables in your hosting platform:

​
Vercel

  1. Go to your project on Vercel Dashboard
  2. Navigate to Settings → Environment Variables
  3. Add:
    • SUPABASE_URL → your production URL
    • SUPABASE_KEY → your production key
  4. Select Production environment
  5. Click Save

​
Netlify

  1. Go to Site Settings → Build & Deploy → Environment
  2. Click Edit Variables
  3. Add your variables
  4. Save and redeploy

​
Other Platforms

Most platforms support environment variables via:
  • Dashboard UI
  • CLI commands
  • Configuration files
Refer to your hosting provider’s documentation.

​
Security Best Practices

​
✅ Do

  • Use the anon/public key for client-side code
  • Enable Row Level Security (RLS) on all Supabase tables
  • Create separate Supabase projects for development and production
  • Rotate keys if accidentally exposed
  • Use different keys per environment

​
❌ Don’t

  • Never use the service role key in client-side code
  • Don’t commit .env files to Git
  • Don’t share keys in public forums or screenshots
  • Don’t hardcode credentials directly in source files

​
Troubleshooting

​
Error: “supabaseUrl is required”

Cause: Environment variables not loaded. Solution:
  1. Verify .env file exists in project root
  2. Check variable names match exactly (case-sensitive)
  3. Restart the dev server: npm run dev

​
Error: “Invalid API key”

Cause: Wrong key or key expired. Solution:
  1. Re-copy the key from Supabase dashboard
  2. Ensure you’re using the anon key, not service role
  3. Check for extra spaces or line breaks

​
Error: “Failed to fetch”

Cause: Network issue or incorrect URL. Solution:
  1. Verify SUPABASE_URL is correct
  2. Check internet connection
  3. Ensure Supabase project is active (not paused)

​
Template

Copy this template for your .env file: 
# Supabase Configuration
# Get these values from: https://app.supabase.com/project/_/settings/api

SUPABASE_URL=
SUPABASE_KEY=

​
Next Steps

The portfolio is configured for Server-Side Rendering (SSR) with Vercel adapter. Environment variables are accessed at build time and runtime.

Build docs developers (and LLMs) love

Get started for freeTalk to us