Remote-Control-Center/mc_test/ENV_SETUP.md

Environment Configuration Guide

Overview

All hardcoded IP addresses and domains have been moved to environment variables for easier configuration across different environments.

Quick Start

1. Copy the example file:

   cp env.example .env
   

2. Edit .env with your values:

   # For local development
   VITE_API_URL=http://localhost:8000
   VITE_DEV_HOST=192.168.200.10
   
   # For production
   VITE_API_URL=https://mc.exbytestudios.com
   VITE_PROD_DOMAIN=mc.exbytestudios.com
   

3. Start development server:

   npm run dev
   

Environment Variables

API Configuration

• VITE_API_URL - Base URL for API endpoints (default: https://mc.exbytestudios.com)
  • Development: http://localhost:8000
  • Production: https://mc.exbytestudios.com

Domain Configuration

• VITE_PROD_DOMAIN - Production domain (default: mc.exbytestudios.com)
• VITE_BACKUP_DOMAIN - Backup domain (default: backup.mc.exbytestudios.com)
• VITE_TEST_DOMAIN - Test domain (default: test.exbytestudios.com)

Development Server Configuration

• VITE_DEV_HOST - Vite dev server host (default: 192.168.200.10)
• VITE_DEV_PORT - Vite dev server port (default: 5173)
• VITE_DEV_ALLOWED_HOST - Allowed host for HMR (default: test.exbytestudios.com)

Security Settings

• VITE_ENABLE_CERTIFICATE_PINNING - Enable/disable certificate pinning (default: true)
  • Set to false in development
  • Set to true in production
• VITE_CERTIFICATE_PINNING_FALLBACK - Enable fallback for certificate pinning (default: true)

Development Settings

• VITE_DEBUG_MODE - Enable debug mode (default: false)
• VITE_LOG_LEVEL - Logging level: debug, info, warn, error (default: info)

Files Using Environment Variables

Configuration Files

• vite.config.ts - Uses VITE_DEV_HOST, VITE_DEV_PORT, VITE_DEV_ALLOWED_HOST
• src/renderer/config/api.ts - Uses VITE_API_URL

Service Files

• src/renderer/services/CertificatePinning.ts - Uses VITE_PROD_DOMAIN, VITE_BACKUP_DOMAIN
• src/renderer/utils/csp.ts - Uses VITE_PROD_DOMAIN
• src/renderer/mocks/mockMachines.ts - Uses VITE_DEV_HOST

Static Configuration Files (Manual Update Required)

• csp-config.json - Update production domains manually to match .env
• index.html - CSP meta tag uses hardcoded values (acceptable for development)

Development vs Production

Development (.env.development)

VITE_API_URL=http://localhost:8000
VITE_DEV_HOST=192.168.200.10
VITE_ENABLE_CERTIFICATE_PINNING=false
VITE_DEBUG_MODE=true
VITE_LOG_LEVEL=debug

Production (.env.production)

VITE_API_URL=https://mc.exbytestudios.com
VITE_PROD_DOMAIN=mc.exbytestudios.com
VITE_ENABLE_CERTIFICATE_PINNING=true
VITE_DEBUG_MODE=false
VITE_LOG_LEVEL=info

Migration from Hardcoded Values

All instances of hardcoded IP (192.168.200.10) and domains (*.exbytestudios.com) have been replaced with environment variables:

Before

const API_URL = 'https://mc.exbytestudios.com';
host: '192.168.200.10'

After

const API_URL = import.meta.env.VITE_API_URL || 'https://mc.exbytestudios.com';
host: import.meta.env.VITE_DEV_HOST || '192.168.200.10'

Security Notes

1. Never commit .env files to git - They are in .gitignore by default
2. Use different values for each environment - Development, Testing, Production
3. Enable certificate pinning in production - Set VITE_ENABLE_CERTIFICATE_PINNING=true
4. Update csp-config.json - When changing production domains, update CSP config manually

Troubleshooting

API connection fails

• Check VITE_API_URL matches your API server
• Verify API server is running
• Check network connectivity

HMR (Hot Module Replacement) not working

• Verify VITE_DEV_HOST is accessible
• Check VITE_DEV_ALLOWED_HOST matches your access domain
• Ensure WebSocket connections are allowed

Certificate pinning errors

• Disable in development: VITE_ENABLE_CERTIFICATE_PINNING=false
• Verify certificate fingerprints in production
• Check VITE_PROD_DOMAIN matches actual certificate domain