Environment Setup

Configure environment variables and prerequisites for MLM CMMS deployment

Overview

The MLM CMMS application requires specific environment variables to connect to Supabase and enable push notifications. This guide covers the complete environment setup process for both development and production environments.

All environment variables must be prefixed with VITE_ to be accessible in the Vite-based React application.

Prerequisites

Before setting up environment variables, ensure you have:

1. Supabase Project Created

   Create a new Supabase project at supabase.com and note your project reference ID.

2. Node.js and npm Installed

   Verify installation:

   node --version  # Should be v18 or higher
   npm --version
   
3. Repository Cloned

   git clone https://github.com/EdgarJr30/cilm_easy_mant.git
   cd cilm_easy_mant
   

Required Environment Variables

Core Configuration

Create a .env file in the project root with the following variables:

# Supabase Configuration
VITE_SUPABASE_URL=<your-supabase-url>
VITE_SUPABASE_ANON_KEY=<your-supabase-anon-key>

# Web Push Notifications (VAPID Public Key)
VITE_WEB_PUSH_PUBLIC_KEY=<your-vapid-public-key>

Never commit the .env file to version control. It should be included in .gitignore.

Obtaining Supabase Credentials

1. Navigate to Project Settings

   Go to your Supabase project dashboard and click on Settings > API.

2. Copy Project URL

   Find your Project URL under “Project API” section:

   https://[project-ref].supabase.co
   

   Set this as VITE_SUPABASE_URL.

3. Copy Anonymous Key

   Find the anon/public key under “Project API keys”:

   eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
   

   Set this as VITE_SUPABASE_ANON_KEY.

The anon key is safe to use in frontend code. Never use the service_role key in frontend environment variables.

Generating VAPID Keys for Push Notifications

VAPID keys are required for Web Push notifications:

npx web-push generate-vapid-keys --json

This command generates:

{
  "publicKey": "BG7x...",
  "privateKey": "abc123..."
}

1. Set Public Key in Frontend

   Add the publicKey to your .env file:

   VITE_WEB_PUSH_PUBLIC_KEY=BG7x...
   
2. Set Private Key in Supabase

   The privateKey must be configured as a secret in Supabase Edge Functions (covered in Supabase Configuration).

Environment-Specific Configuration

Development Environment

For local development:

# .env (development)
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
VITE_WEB_PUSH_PUBLIC_KEY=BG7x...

Run the development server:

npm install
npm run dev

The application will be available at http://localhost:5173 (or the port shown in terminal).

QA Environment

For QA/staging builds:

# .env.qa
VITE_SUPABASE_URL=https://qa-project.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
VITE_WEB_PUSH_PUBLIC_KEY=BG7x...

Build for QA:

npm run build:qa

Production Environment

For production deployments:

# .env.production
VITE_SUPABASE_URL=https://prod-project.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
VITE_WEB_PUSH_PUBLIC_KEY=BG7x...

Build for production:

npm run build:prod

Use separate Supabase projects for development, QA, and production environments to maintain data isolation.

Security Best Practices

Never Commit Secrets

Ensure .env, .env.qa, and .env.production are in your .gitignore file.

Use Anon Key Only

Frontend code should only use the anonymous key. Service role keys are for server-side operations only.

Rotate Keys Regularly

Rotate API keys and VAPID keys periodically, especially after team member departures.

Environment Separation

Use different Supabase projects for dev, QA, and production to prevent data leakage.

Verification

After setting up your environment variables:

1. Install Dependencies

   npm install
   
2. Run Linter

   npm run lint
   
3. Start Development Server

   npm run dev
   
4. Verify Connection

   Open the application in your browser and check the console for any connection errors to Supabase.

Troubleshooting

”Invalid API key” Error

• Verify that you copied the complete anon key without truncation
• Ensure the key is prefixed with VITE_
• Check that the Supabase URL matches your project

Environment Variables Not Loading

• Restart the Vite dev server after changing .env files
• Verify the .env file is in the project root directory
• Ensure variable names are prefixed with VITE_

Push Notifications Not Working

• Verify the VAPID public key is correctly set in .env
• Ensure the corresponding private key is configured in Supabase Edge Functions
• Check that your site is served over HTTPS (required for push notifications)

Next Steps

Database Setup

Configure your Supabase database by executing the SQL modules in the correct order.