TurboTrades/FIX_ENV_FILE.md

🔥 URGENT: Fix .env File to Enable Admin Routes

The Problem

Your frontend/.env file contains:

VITE_API_URL=http://localhost:3000

This causes ALL API requests to bypass the Vite proxy and go directly to the backend, which breaks the admin routes because they expect the /api prefix.

The Solution

Option 1: Use Vite Proxy (Recommended for Development)

Edit frontend/.env and change:

# BEFORE (BROKEN)
VITE_API_URL=http://localhost:3000

# AFTER (FIXED)
# VITE_API_URL=http://localhost:3000  # Commented out for development

OR simply delete the line entirely.

Option 2: Keep Direct Backend URL

Edit frontend/.env to use the proxy:

# Use Vite proxy in development
VITE_API_URL=/api

Why This Matters

Current Flow (BROKEN)

Frontend: axios.get('/admin/config')
    ↓
Axios baseURL: http://localhost:3000 (from .env)
    ↓
Full URL: http://localhost:3000/admin/config
    ↓
Backend: No route at /admin/config
    ↓
Result: 404 Not Found ❌

Fixed Flow

Frontend: axios.get('/admin/config')
    ↓
Axios baseURL: /api (default, no .env override)
    ↓
Full URL: /api/admin/config
    ↓
Vite Proxy: Intercepts /api/*
    ↓
Proxies to: http://localhost:3000/api/admin/config
    ↓
Backend: Route exists at /api/admin/config
    ↓
Result: 200 OK ✅

Step-by-Step Instructions

Step 1: Edit the .env File

# Open the file
notepad frontend\.env

# Or use any text editor
code frontend\.env

Step 2: Comment Out or Remove the Line

Change this:

VITE_API_URL=http://localhost:3000

To this:

# VITE_API_URL=http://localhost:3000

Or delete the line entirely.

Step 3: Restart Vite Dev Server

The Vite dev server needs to be restarted to pick up the .env change:

# Stop the frontend dev server (Ctrl+C)
# Then restart it:
cd frontend
npm run dev

Step 4: Hard Refresh Browser

Clear the browser cache:

• Windows/Linux: Ctrl + Shift + R
• Mac: Cmd + Shift + R
• Or: Open DevTools (F12) → Right-click refresh → "Empty Cache and Hard Reload"

Step 5: Test Again

1. Navigate to: http://localhost:5173/admin
2. Click the "Debug" tab
3. Click "Run Tests"
4. All 4 tests should now pass ✅

Expected Results

After the fix, the Debug Panel should show:

{
  "environment": {
    "apiBaseUrl": "/api",  // ← Should be /api, not http://localhost:3000
    "currentRoute": "/admin",
    "location": "http://localhost:5173/admin"
  },
  "tests": [
    {
      "name": "Health Check",
      "status": "success",  // ✅
    },
    {
      "name": "Auth Check",
      "status": "success",  // ✅
    },
    {
      "name": "Admin Config Access",
      "status": "success",  // ✅ (was error)
    },
    {
      "name": "Admin Routes Access",
      "status": "success",  // ✅ (was error)
    }
  ]
}

Verification

After making the change, verify it worked:

# Check the environment variable is not set
# This should show nothing:
grep VITE_API_URL frontend/.env | grep -v "^#"

# Or this should show it's commented:
grep VITE_API_URL frontend/.env

Quick Test

Test with curl through the proxy:

# This should work now (401 Unauthorized is expected without cookies)
curl http://localhost:5173/api/admin/config

# Response should be:
# {"error":"Unauthorized","message":"No access token provided"}
# NOT: {"statusCode":404,"error":"Not Found","message":"Route GET:/admin/config not found"}

Production Considerations

For production, you WOULD set VITE_API_URL to your actual API domain:

Production .env.production:

VITE_API_URL=https://api.yourdomain.com

But for development, leave it unset or set to /api to use the Vite proxy.

Common Mistakes

❌ Wrong: VITE_API_URL=http://localhost:3000
✅ Right: Comment it out or VITE_API_URL=/api

❌ Wrong: Forgetting to restart Vite dev server
✅ Right: Always restart after .env changes

❌ Wrong: Not clearing browser cache
✅ Right: Hard refresh (Ctrl+Shift+R)

Summary

1. Edit frontend/.env
2. Comment out or remove VITE_API_URL=http://localhost:3000
3. Restart Vite dev server (npm run dev)
4. Hard refresh browser (Ctrl+Shift+R)
5. Test in Debug panel - all tests should pass ✅

---

Priority: 🔥 CRITICAL
Time Required: ⏱️ 2 minutes
Complexity: ⭐ Very Easy
Impact: Fixes all admin route 404 errors

After this fix, the admin panel will work perfectly! 🎉