video-query/frontend/CONFIG_README.md

Frontend Configuration Guide

Overview

The frontend uses two configuration files to support both local development and production deployment:

1. config.js - Production configuration (ALWAYS committed to git)
2. config.local.js - Local development configuration (NEVER committed to git)

How It Works

The index.html loads both files in order:

1. First loads config.js (production config)
2. Then loads config.local.js (if it exists, overrides production config)

In production, only config.js exists, so production settings are used. In development, config.local.js overrides the production settings to point to localhost.

Local Development Setup

config.local.js is already created and configured to point to:

• Frontend: http://localhost:3000
• Backend: http://localhost:5010

This file is listed in .gitignore and will NOT be committed to git.

Production Deployment

config.js contains production settings:

• Frontend: https://brandtechsandbox.oliver.solutions/video-query/
• Backend: https://brandtechsandbox.oliver.solutions/video_query_back

When deploying to production:

1. Only config.js is deployed (config.local.js is excluded)
2. The application automatically uses production URLs
3. No manual configuration changes needed

Important Notes

• ✅ DO commit config.js (production config)
• ❌ DO NOT commit config.local.js (local dev config)
• The .gitignore file ensures config.local.js is never accidentally committed
• If you need to modify production URLs, edit config.js
• If you need to modify local development URLs, edit config.local.js

Troubleshooting

"Backend is not reachable" in local development

1. Check that backend is running: ps aux | grep "python.*run.py"
2. Verify backend is listening on port 5010: ss -tulpn | grep 5010
3. Check config.local.js has correct URLs
4. Clear browser cache and hard reload (Ctrl+Shift+R or Cmd+Shift+R)

Changes to config not taking effect

1. Hard reload the browser (Ctrl+Shift+R or Cmd+Shift+R)
2. Check browser console for config loading messages
3. Verify the correct config file is being loaded

CORS errors in browser console

This means the frontend and backend URLs don't match. Check:

1. config.local.js (or config.js) has correct backend URL
2. Backend CORS settings in backend/app.py include your frontend URL