Environment Configuration

Relevant source files

The following files were used as context for generating this wiki page:

• DEPLOY-NETLIFY.md
• README.md
• NETLIFY-DASHBOARD-SETUP.md
• scripts/setup-supabase-complete.js
• utils/logger.ts
• supabase/setup-instructions.md
• STATUS-DEPLOY.md
• TEST_REPORT.md

The ElmecV2 project utilizes a robust environment configuration system to manage settings across different stages, primarily development and production. This system relies on .env files for local development and environment variables set within the Netlify UI for production deployments. This separation ensures that sensitive credentials are not hardcoded into the source code and allows the application to connect to different backend services (like Supabase) depending on the environment.

The configuration dictates critical application behavior, from API endpoints to feature flags and logging levels. A key variable, EXPO_PUBLIC_ENVIRONMENT, controls environment-specific logic within the application.

Sources: README.md, DEPLOY-NETLIFY.md, utils/logger.ts

Environment Variables

The application's behavior is controlled by a set of environment variables. These are loaded from a .env file during local development or set directly in the Netlify dashboard for deployed environments.

Variable	Description	Example Value	Used In
EXPO_PUBLIC_SUPABASE_URL	The URL of the Supabase project.	https://pdpqkgrqlubyzkcivifk.supabase.co	Local, Production
EXPO_PUBLIC_SUPABASE_ANON_KEY	The public anonymous key for the Supabase project.	eyJhbGciOi...	Local, Production
EXPO_PUBLIC_ENVIRONMENT	Defines the current operating environment. Controls features like logging.	development or production	Local, Production
NODE_ENV	Standard Node.js environment variable, set to production for builds.	production	Production
EXPO_PUBLIC_EAS_PROJECT_ID	The project ID for Expo Application Services (EAS).	elmec-mobile-app-demo	Local, Production
SUPABASE_SERVICE_ROLE_KEY	The service role key for Supabase, used for admin-level scripts. Should not be exposed on the frontend.	eyJhbGciOi...	Local (Scripts)

Sources: DEPLOY-NETLIFY.md, README.md, NETLIFY-DASHBOARD-SETUP.md, scripts/setup-supabase-complete.js:15

Configuration Loading Flow

The method for loading environment variables differs between local development and the production environment on Netlify.

The diagram below illustrates the configuration loading process for different environments.

Local Development Setup

For local development, configuration is managed using a .env file in the project root. The repository includes an example file to guide the setup.

.env File

To set up a local environment, you must create a .env file by copying .env.example.

Source: README.md

An example structure for the .env file is as follows:

# Supabase Configuration
EXPO_PUBLIC_SUPABASE_URL=tu_supabase_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=tu_supabase_anon_key

# Environment
EXPO_PUBLIC_ENVIRONMENT=development

# Expo
EAS_PROJECT_ID=tu_eas_project_id

Source: README.md

For running administrative scripts, such as setup-supabase-complete.js, a .env.local file is used, which must also contain the SUPABASE_SERVICE_ROLE_KEY.

require('dotenv').config({ path: '.env.local' });
const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL;
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;

Source: scripts/setup-supabase-complete.js:13-15

Production (Netlify) Setup

In the production environment hosted on Netlify, environment variables are configured directly in the site's dashboard settings. They are not stored in the repository.

Netlify Deployment Flow

The following diagram shows the sequence of events when deploying to Netlify, highlighting where environment variables are used.

Configuration Steps

1. Navigate to Site settings > Environment variables in the Netlify dashboard.
2. Click "Add a variable".
3. Add each required variable, such as EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY.
4. Set the appropriate scopes for each variable (e.g., "Production" and "Deploy previews").

Source: DEPLOY-NETLIFY.md, NETLIFY-DASHBOARD-SETUP.md

Application Behavior Control

Environment variables directly influence the application's runtime behavior. A primary example is the Logger utility, which adjusts its configuration based on the EXPO_PUBLIC_ENVIRONMENT variable.

Logger Configuration

The Logger class enables or disables console logging and sets the minimum log level based on the environment.

• In development, console logging is enabled, and the log level is set to DEBUG.
• In production, console logging is disabled, and the log level is raised to WARN to reduce noise.

// file: utils/logger.ts

export class Logger {
  private static config: LoggerConfig = {
    enableConsoleLogging: process.env.EXPO_PUBLIC_ENVIRONMENT !== 'production',
    enableRemoteLogging: process.env.EXPO_PUBLIC_ENVIRONMENT === 'production',
    logLevel: process.env.EXPO_PUBLIC_ENVIRONMENT === 'production' ? LogLevel.WARN : LogLevel.DEBUG,
    maxLocalLogs: 1000
  };

  // ...
}

Source: utils/logger.ts:25-31

Backend Configuration (Supabase)

For the authentication flow to work correctly with the deployed Netlify application, the Supabase project must be configured to recognize the Netlify URL.

URL Configuration in Supabase

1. Navigate to your Supabase project dashboard.
2. Go to Authentication > URL Configuration.
3. Set the Site URL to your Netlify app's URL (e.g., https://your-app.netlify.app).
4. Add the Netlify URL to the Redirect URLs, including wildcards if necessary (e.g., https://your-app.netlify.app/**).

This ensures that Supabase correctly handles authentication callbacks after a user logs in.

Sources: DEPLOY-NETLIFY.md, supabase/setup-instructions.md:43-47