69 lines
3.1 KiB
Markdown
69 lines
3.1 KiB
Markdown
# 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:
|
|
|
|
```typescript
|
|
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. |