Environment Variables

Overview

The Transport Logistics platform uses environment variables to configure connections to external services, primarily Supabase for backend functionality.

Currently, Supabase credentials are hardcoded in src/integrations/supabase/client.ts. For production or team environments, you should migrate these to environment variables for better security and flexibility.

Current Configuration

Supabase Client Setup

The Supabase client is configured in src/integrations/supabase/client.ts:

const SUPABASE_URL = "https://uvosmrargaueilecbycn.supabase.co";
const SUPABASE_PUBLISHABLE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";

export const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY);

The file is marked as auto-generated with a warning not to edit directly. This suggests it may be managed by a build tool or deployment platform.

Recommended Environment Variables

For a production-ready setup, migrate to environment variables:

Required Variables

VITE_SUPABASE_URL

string

required

Your Supabase project URLFormat: https://[project-ref].supabase.coExample: https://uvosmrargaueilecbycn.supabase.coWhere to find: Supabase Dashboard → Project Settings → API → Project URL

VITE_SUPABASE_ANON_KEY

string

required

Your Supabase anonymous (publishable) keyFormat: Long JWT token starting with eyJ...Security: Safe to expose in client-side code (public key)Where to find: Supabase Dashboard → Project Settings → API → Project API keys → anon public

Optional Variables

VITE_SUPABASE_SERVICE_ROLE_KEY

string

Service role key for admin operations (server-side only)Security: ⚠️ Never expose in client code - has full database accessUse case: Backend scripts, migrations, admin functions

VITE_API_BASE_URL

string

default:"/"

Base URL for API requests if using a separate backend

VITE_APP_ENV

string

default:"development"

Application environmentOptions: development, staging, production

Setup Instructions

Create Environment File

Create a .env.local file in the project root:

touch .env.local

Vite only loads .env files that start with VITE_ prefix for security. Variables without this prefix won’t be exposed to the client.

Add Supabase Credentials

Add your Supabase configuration to .env.local:

VITE_SUPABASE_URL=https://your-project-ref.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

Never commit .env.local to version control. Add it to .gitignore:

echo ".env.local" >> .gitignore

Update Supabase Client

Modify src/integrations/supabase/client.ts to use environment variables:

import { createClient } from '@supabase/supabase-js';
import type { Database } from './types';

const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
const SUPABASE_PUBLISHABLE_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY;

if (!SUPABASE_URL || !SUPABASE_PUBLISHABLE_KEY) {
  throw new Error('Missing Supabase environment variables');
}

export const supabase = createClient<Database>(
  SUPABASE_URL,
  SUPABASE_PUBLISHABLE_KEY
);

Restart Development Server

Changes to .env files require a server restart:

# Stop the server (Ctrl+C)
# Start it again
npm run dev

Getting Supabase Credentials

Access Supabase Dashboard

Select Your Project

Choose the Transport Logistics project (or create a new one)

Navigate to API Settings

Go to Project Settings → API

Copy Credentials

Copy the following values:

Project URL: Use for VITE_SUPABASE_URL
anon/public key: Use for VITE_SUPABASE_ANON_KEY

The anon key is safe to expose in client-side code. It respects Row Level Security (RLS) policies.

Environment Files

Vite supports multiple environment files:

# Loaded in all environments
# Committed to version control
VITE_APP_NAME=Transport Logistics
VITE_APP_VERSION=1.0.0

Load Priority

Vite loads environment files in this order (higher priority first):

.env.[mode].local (e.g., .env.production.local)
.env.[mode] (e.g., .env.production)
.env.local
.env

Accessing Environment Variables

In your TypeScript/JavaScript code:

// Access environment variables
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const appEnv = import.meta.env.VITE_APP_ENV;
const isDev = import.meta.env.DEV; // Built-in Vite variable
const isProd = import.meta.env.PROD; // Built-in Vite variable

// Type safety
interface ImportMetaEnv {
  readonly VITE_SUPABASE_URL: string;
  readonly VITE_SUPABASE_ANON_KEY: string;
  readonly VITE_APP_ENV: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Built-in Vite Variables

Vite provides these variables automatically:

import.meta.env.MODE

string

The mode the app is running in (development, production, etc.)

import.meta.env.DEV

boolean

true if running in development mode

import.meta.env.PROD

boolean

true if running in production mode

import.meta.env.BASE_URL

string

The base URL the app is being served from

Security Best Practices

Never Commit Secrets

Add .env.local and .env.*.local to .gitignore

Use VITE_ Prefix

Only variables with VITE_ prefix are exposed to client

Rotate Keys Regularly

Change API keys periodically in Supabase dashboard

Separate Service Keys

Never expose service role keys in client code

Important Security Notes:

The anon key is designed to be public but protected by Row Level Security
The service_role key bypasses RLS and should never be exposed
Always validate and sanitize user input, even with RLS enabled
Use environment-specific credentials for staging/production

Deployment

When deploying to production platforms:

Vercel
Netlify
Docker

Add environment variables in Project Settings → Environment Variables:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Redeploy to apply changes.

Set variables in Site Settings → Environment Variables:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Trigger a new deploy.

Pass variables at runtime:

docker run -e VITE_SUPABASE_URL=https://your-project.supabase.co \
           -e VITE_SUPABASE_ANON_KEY=your-key \
           your-image

Troubleshooting

Environment variables are undefined

Possible causes:

Missing VITE_ prefix (variables must start with VITE_)
Server not restarted after adding variables
Typo in variable name
.env.local file not in project root

Solution: Check prefix, restart server with npm run dev

Supabase connection fails

Check:

URL format is correct: https://[project-ref].supabase.co
No trailing slashes in URL
Anon key is complete (long JWT token)
Project is not paused in Supabase dashboard
Network connectivity to Supabase servers

Variables work locally but not in production

Verify:

Environment variables are set in hosting platform
Build was triggered after adding variables
Variable names match exactly (case-sensitive)
No quotes around values in hosting platform

Next Steps

Database Migrations

Learn how to manage database schema changes

Local Setup

Complete local development setup guide

Architecture

Development

Deployment

Overview

Current Configuration

Supabase Client Setup

Recommended Environment Variables

Required Variables

Optional Variables

Setup Instructions

Getting Supabase Credentials

Environment Files

Load Priority

Accessing Environment Variables

Built-in Vite Variables

Security Best Practices

Never Commit Secrets

Use VITE_ Prefix

Rotate Keys Regularly

Separate Service Keys

Deployment

Troubleshooting

Next Steps

Database Migrations

Local Setup

Build docs developers (and LLMs) love

Architecture

Development

Deployment

​Overview

​Current Configuration

​Supabase Client Setup

​Recommended Environment Variables

​Required Variables

​Optional Variables

​Setup Instructions

​Getting Supabase Credentials

​Environment Files

​Load Priority

​Accessing Environment Variables

​Built-in Vite Variables

​Security Best Practices

Never Commit Secrets

Use VITE_ Prefix

Rotate Keys Regularly

Separate Service Keys

​Deployment

​Troubleshooting

​Next Steps

Database Migrations

Local Setup

Build docs developers (and LLMs) love

Overview

Current Configuration

Supabase Client Setup

Recommended Environment Variables

Required Variables

Optional Variables

Setup Instructions

Getting Supabase Credentials

Environment Files

Load Priority

Accessing Environment Variables

Built-in Vite Variables

Security Best Practices

Deployment

Troubleshooting

Next Steps