From a480c502212697d9bd60329ffb35db1e0f2a1480 Mon Sep 17 00:00:00 2001 From: antoine lebaud Date: Wed, 10 Jul 2024 20:50:40 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7(frontend)=20refactor=20API=20URl?= =?UTF-8?q?=20to=20work=20for=20remote=20environments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Discussed IRL with @manuhabitela. In developpement, we build locally the Docker image. Thus, we can pass values to the frontend before the npm build command was called. Environment variables are great for configuration, and work perfectly in dev mode, building Docker image on the fly. However, in other environment (e.g. staging, pre-prod, prod) we'll pull a common Docker image published in a remote registry. All cited environments should use the same Docker image to make tests/deployment reproducible between envs. As the Docker image is not rebuilt on the fly, we cannot easily configure customized environment variables for each environment. The API base URL would have a different value for each environment, and would require a different environment variable. Inspired by Impress works, if no environment variable is passed for the API URL, the window origin will be used, and then the API path will be appended. Frontend and backend are always deployed on the same URL, usually frontend is at the '/' route, and backend at the '/api/vXX/' route. If any configuration are required for each remote environment, they would be retrieved from the API at runtime. Voila! Don't hesitate to challenge this commit. --- src/frontend/.env.development | 2 +- src/frontend/src/api/apiUrl.ts | 13 +++++++++++-- src/helm/env.d/dev/values.meet.yaml.gotmpl | 2 +- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/frontend/.env.development b/src/frontend/.env.development index 1a71fafa..520d2fb3 100644 --- a/src/frontend/.env.development +++ b/src/frontend/.env.development @@ -1,2 +1,2 @@ -VITE_API_BASE_URL=http://localhost:8071/api/v1.0/ +VITE_API_BASE_URL=http://localhost:8071/ VITE_LIVEKIT_SERVER_URL=http://localhost:7880 diff --git a/src/frontend/src/api/apiUrl.ts b/src/frontend/src/api/apiUrl.ts index dc1d3c2a..f4032197 100644 --- a/src/frontend/src/api/apiUrl.ts +++ b/src/frontend/src/api/apiUrl.ts @@ -1,3 +1,12 @@ -export const apiUrl = (path: string) => { - return `${import.meta.env.VITE_API_BASE_URL.replace(/\/$/, '')}${path}` +export const apiUrl = (path: string, apiVersion = '1.0') => { + + const origin = + import.meta.env.VITE_API_BASE_URL + || (typeof window !== 'undefined' ? window.location.origin : ''); + + // Remove leading/trailing slashes from origin/path if it exists + const sanitizedOrigin = origin.replace(/\/$/, '') + const sanitizedPath = path.replace(/^\//, ''); + + return `${sanitizedOrigin}/api/v${apiVersion}/${sanitizedPath}`; } diff --git a/src/helm/env.d/dev/values.meet.yaml.gotmpl b/src/helm/env.d/dev/values.meet.yaml.gotmpl index 7d34d238..e4a8417f 100644 --- a/src/helm/env.d/dev/values.meet.yaml.gotmpl +++ b/src/helm/env.d/dev/values.meet.yaml.gotmpl @@ -79,7 +79,7 @@ frontend: envVars: VITE_PORT: 8080 VITE_HOST: 0.0.0.0 - VITE_API_BASE_URL: https://meet.127.0.0.1.nip.io/api/v1.0/ + VITE_API_BASE_URL: https://meet.127.0.0.1.nip.io/ VITE_LIVEKIT_SERVER_URL: https://livekit.127.0.0.1.nip.io/ replicas: 1