Frontend API URL Handling

Use dynamic window.CONFIG.API_URL based on location.hostname, no build tools required.

<!-- In index.html -->
<script>
  window.CONFIG = {
    API_URL: location.hostname === 'localhost'
      ? '<http://localhost:5000>' // local backend server
      : '<https://your-production-server.com>' // production backend server
  };
</script>

Use in fetch:

fetch(`${window.CONFIG.API_URL}/api/xxx`)
  .then(res => res.json())
  .then(data => console.log(data));

Backend Server (Node.js) Environment Variables

Use .env locally + environment panel on cloud platform (Render/Fly.io/etc).

Install dotenv:

npm install dotenv

At the top of your server code:

import dotenv from 'dotenv';
dotenv.config();

const PORT = process.env.PORT || 5000;

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

.env (for local development):

PORT=5000
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
NODE_ENV=development

Important:

• Do not write PORT in production .env.
• Cloud platforms inject their own PORT, your server must use process.env.PORT.
• SUPABASE_URL, SUPABASE_ANON_KEY are identical between dev and prod.
• Always ignore .env in Git: add .env to .gitignore.

Why Frontend Doesn't Specify Port

• Browser connects via domain (e.g., https://your-app.fly.dev).