travelplanning/FIX_ANDROID.md

To AI Agent: Implement Smart Runtime Environment Detection for Backend URL (Eliminate Dynamic .env Conflicts)

1. Context & Objective

We want to modify the frontend backend-URL resolution engine exactly once so that pulling code to the Linux Debian Server (Docker build) or a Windows PC (Android build) requires zero manual .env updates.

• The Strategy: Instead of hardcoding VITE_BACKEND_URL in a static .env file, we will write a smart runtime detector inside the code.
• The Logic:
  • If the app runs on a standard web browser (Docker Server), window.location.origin automatically resolves to https://yotrip.labz.io.vn.
  • If the app runs inside an Android APK wrapper, the origin defaults to http://localhost, capacitor://, or file://. The code will detect this and automatically inject the absolute server production URL.

---

2. Refactoring Blueprint

Step 1: Overhaul socketService.ts (or your central API configuration file)

Replace the current environment variable lookup with this smart dynamic runtime resolver:

import { io, Socket } from 'socket.io-client';

const resolveBackendEndpoint = (): string => {
  // 1. Keep a fallback for explicit env overrides if deliberately set
  if (import.meta.env.VITE_BACKEND_URL) {
    return import.meta.env.VITE_BACKEND_URL;
  }

  const origin = window.location.origin;
  const userAgent = navigator.userAgent.toLowerCase();

  /* 2. DETECT ANDROID APK WRAPPER ENVIRONMENT
     Android webviews/hybrid shells run on custom local hosts or file protocols
  */
  const isAndroidApp = 
    origin.includes('localhost') || 
    origin.includes('capacitor://') || 
    origin.startsWith('file://') ||
    (userAgent.includes('android') && !origin.includes('yotrip.labz.io.vn'));

  if (isAndroidApp) {
    console.log("📱 Android App environment detected. Forcing absolute production domain mapping.");
    return '[https://yotrip.labz.io.vn](https://yotrip.labz.io.vn)';
  }

  // 3. Default fallback for Production Web (Docker server automatically yields its own domain)
  return origin;
};

export const SOCKET_URL = resolveBackendEndpoint();
console.log(`🌐 Active Network Base Endpoint: ${SOCKET_URL}`);

### Step 2: Sync API Axios Client Configuration (api.ts / axiosClient.ts)
Ensure your API client hooks directly into the newly created SOCKET_URL variable to keep them unified:

import axios from 'axios';
import { SOCKET_URL } from './socketService';

export const api = axios.create({
  baseURL: SOCKET_URL, // Dynamically synchronizes across both Docker and Android build pipelines
  headers: {
    'Content-Type': 'application/json',
  },
});

## 3. Verification Checklist for AI Agent
    [ ] Eradicate .env Dependency: Ensure that clearing out VITE_BACKEND_URL from local .env files does not cause code compilation failures.

    [ ] Web Browser Verification: When deployed via Docker on the server, verify the network tab calls requests relatively to the running host origin.

    [ ] Android Simulation Success: When compiled into an APK on Windows, confirm all API/Socket requests direct straight to https://yotrip.labz.io.vn, avoiding any localhost 404 blockages.