fix: Fixed custom domain deployment support

bahattincinic · May 31, 2024 · 22943d4 · 22943d4
1 parent 63be696
commit 22943d4
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 44 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "VUE_APP_API_BASE_URL=http://localhost:9000/api vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,vue,html,css,scss}\""

diff --git a/ui/src/services/activities.js b/ui/src/services/activities.js
@@ -1,7 +1,9 @@
-import { API_BASE_URL } from './api';
+import { getApiBaseURL } from './api';
 
 export async function fetchActivities(page) {
-  const response = await fetch(`${API_BASE_URL}/activities?page=${page}`, {
+  const endpoint = `${getApiBaseURL()}/activities?page=${page}`;
+
+  const response = await fetch(endpoint, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -16,7 +18,7 @@ export async function fetchActivities(page) {
 }
 
 export async function getActivity(id) {
-  const endpoint = `${API_BASE_URL}/activities/${id}`;
+  const endpoint = `${getApiBaseURL()}/activities/${id}`;
 
   const response = await fetch(endpoint, {
     method: 'GET',
@@ -33,7 +35,7 @@ export async function getActivity(id) {
 }
 
 export async function getActivityGPX(id, accessToken) {
-  const endpoint = `${API_BASE_URL}/activities/${id}/gpx`;
+  const endpoint = `${getApiBaseURL()}/activities/${id}/gpx`;
 
   const response = await fetch(endpoint, {
     method: 'GET',
@@ -51,7 +53,7 @@ export async function getActivityGPX(id, accessToken) {
 }
 
 export async function getActivityLaps(id, accessToken) {
-  const endpoint = `${API_BASE_URL}/activities/${id}/laps`;
+  const endpoint = `${getApiBaseURL()}/activities/${id}/laps`;
 
   const response = await fetch(endpoint, {
     method: 'GET',

diff --git a/ui/src/services/api.js b/ui/src/services/api.js
@@ -1,3 +1,15 @@
-const API_BASE_URL = process.env.API_URL || 'http://localhost:9000/api';
+function getDomain() {
+  const protocol = window.location.protocol;
+  const hostname = window.location.hostname;
+  const port = window.location.port;
+  return `${protocol}//${hostname}${port ? `:${port}` : ''}`;
+}
 
-export { API_BASE_URL };
+function getApiBaseURL() {
+  if (process.env.VUE_APP_API_BASE_URL) {
+    return process.env.VUE_APP_API_BASE_URL;
+  }
+  return `${getDomain()}/api`;
+}
+
+export { getDomain, getApiBaseURL };
diff --git a/ui/src/services/athletes.js b/ui/src/services/athletes.js
@@ -1,7 +1,9 @@
-import { API_BASE_URL } from './api';
+import { getApiBaseURL } from './api';
 
 export async function fetchAthletes(page) {
-  const response = await fetch(`${API_BASE_URL}/athletes?page=${page}`, {
+  const endpoint = `${getApiBaseURL()}/athletes?page=${page}`;
+
+  const response = await fetch(endpoint, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -16,7 +18,7 @@ export async function fetchAthletes(page) {
 }
 
 export async function getAthlete(id) {
-  const endpoint = `${API_BASE_URL}/athletes/${id}`;
+  const endpoint = `${getApiBaseURL()}/athletes/${id}`;
 
   const response = await fetch(endpoint, {
     method: 'GET',

diff --git a/ui/src/services/auth.js b/ui/src/services/auth.js
@@ -1,15 +1,8 @@
-import { API_BASE_URL } from './api';
-
-function getDomain() {
-  const protocol = window.location.protocol;
-  const hostname = window.location.hostname;
-  const port = window.location.port;
-  return `${protocol}//${hostname}${port ? `:${port}` : ''}`;
-}
+import { getDomain, getApiBaseURL } from './api';
 
 export async function getAuthorizationURL() {
   const callbackURL = `${getDomain()}/app/login`;
-  const endpoint = `${API_BASE_URL}/auth/authorization-url?callback_url=${callbackURL}`;
+  const endpoint = `${getApiBaseURL()}/auth/authorization-url?callback_url=${callbackURL}`;
 
   const response = await fetch(endpoint, {
     method: 'GET',
@@ -26,7 +19,8 @@ export async function getAuthorizationURL() {
 }
 
 export async function getAccessToken(code) {
-  const endpoint = `${API_BASE_URL}/auth/token`;
+  const endpoint = `${getApiBaseURL()}/auth/token`;
+
   const response = await fetch(endpoint, {
     method: 'POST',
     headers: {

diff --git a/ui/src/services/components.js b/ui/src/services/components.js
@@ -1,4 +1,4 @@
-import { API_BASE_URL } from './api';
+import { getApiBaseURL } from './api';
 
 export const componentTypeEnum = {
   table: 'table',
@@ -15,7 +15,7 @@ export const componentTypes = [
 ];
 
 export async function fetchComponents(dashId) {
-  const endpoint = `${API_BASE_URL}/dashboards/${dashId}/components`;
+  const endpoint = `${getApiBaseURL()}/dashboards/${dashId}/components`;
 
   const response = await fetch(endpoint, {
     method: 'GET',
@@ -32,7 +32,7 @@ export async function fetchComponents(dashId) {
 }
 
 export async function createComponent(dashId, data) {
-  const endpoint = `${API_BASE_URL}/dashboards/${dashId}/components`;
+  const endpoint = `${getApiBaseURL()}/dashboards/${dashId}/components`;
 
   const response = await fetch(endpoint, {
     method: 'POST',
@@ -50,7 +50,7 @@ export async function createComponent(dashId, data) {
 }
 
 export async function updateComponent(dashId, compId, data) {
-  const endpoint = `${API_BASE_URL}/dashboards/${dashId}/components/${compId}`;
+  const endpoint = `${getApiBaseURL()}/dashboards/${dashId}/components/${compId}`;
 
   const response = await fetch(endpoint, {
     method: 'PUT',
@@ -68,7 +68,7 @@ export async function updateComponent(dashId, compId, data) {
 }
 
 export async function deleteComponent(dashId, compId) {
-  const endpoint = `${API_BASE_URL}/dashboards/${dashId}/components/${compId}`;
+  const endpoint = `${getApiBaseURL()}/dashboards/${dashId}/components/${compId}`;
 
   const response = await fetch(endpoint, {
     method: 'DELETE',
@@ -83,7 +83,7 @@ export async function deleteComponent(dashId, compId) {
 }
 
 export async function runComponent(dashId, compId) {
-  const endpoint = `${API_BASE_URL}/dashboards/${dashId}/components/${compId}/run`;
+  const endpoint = `${getApiBaseURL()}/dashboards/${dashId}/components/${compId}/run`;
 
   const response = await fetch(endpoint, {
     method: 'POST',

diff --git a/ui/src/services/dashboars.js b/ui/src/services/dashboars.js
@@ -1,7 +1,9 @@
-import { API_BASE_URL } from './api';
+import { getApiBaseURL } from './api';
 
 export async function fetchDashboards() {
-  const response = await fetch(`${API_BASE_URL}/dashboards`, {
+  const endpoint = `${getApiBaseURL()}/dashboards`;
+
+  const response = await fetch(endpoint, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -16,7 +18,7 @@ export async function fetchDashboards() {
 }
 
 export async function getDashboard(id) {
-  const endpoint = `${API_BASE_URL}/dashboards/${id}`;
+  const endpoint = `${getApiBaseURL()}/dashboards/${id}`;
 
   const response = await fetch(endpoint, {
     method: 'GET',
@@ -33,7 +35,9 @@ export async function getDashboard(id) {
 }
 
 export async function createDashboard(data) {
-  const response = await fetch(`${API_BASE_URL}/dashboards`, {
+  const endpoint = `${getApiBaseURL()}/dashboards`;
+
+  const response = await fetch(endpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -49,7 +53,7 @@ export async function createDashboard(data) {
 }
 
 export async function updateDashboard(id, data) {
-  const endpoint = `${API_BASE_URL}/dashboards/${id}`;
+  const endpoint = `${getApiBaseURL()}/dashboards/${id}`;
 
   const response = await fetch(endpoint, {
     method: 'PUT',
@@ -67,7 +71,7 @@ export async function updateDashboard(id, data) {
 }
 
 export async function deleteDashboard(id) {
-  const endpoint = `${API_BASE_URL}/dashboards/${id}`;
+  const endpoint = `${getApiBaseURL()}/dashboards/${id}`;
 
   const response = await fetch(endpoint, {
     method: 'DELETE',
@@ -82,7 +86,7 @@ export async function deleteDashboard(id) {
 }
 
 export async function runDashboard(id) {
-  const endpoint = `${API_BASE_URL}/dashboards/${id}/run`;
+  const endpoint = `${getApiBaseURL()}/dashboards/${id}/run`;
 
   const response = await fetch(endpoint, {
     method: 'POST',

diff --git a/ui/src/services/gears.js b/ui/src/services/gears.js
@@ -1,7 +1,9 @@
-import { API_BASE_URL } from './api';
+import { getApiBaseURL } from './api';
 
 export async function fetchGears(page) {
-  const response = await fetch(`${API_BASE_URL}/gears?page=${page}`, {
+  const endpoint = `${getApiBaseURL()}/gears?page=${page}`;
+
+  const response = await fetch(endpoint, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -16,7 +18,7 @@ export async function fetchGears(page) {
 }
 
 export async function getGear(id) {
-  const endpoint = `${API_BASE_URL}/gears/${id}`;
+  const endpoint = `${getApiBaseURL()}/gears/${id}`;
 
   const response = await fetch(endpoint, {
     method: 'GET',

diff --git a/ui/src/services/user.js b/ui/src/services/user.js
@@ -1,4 +1,4 @@
-import { API_BASE_URL } from './api';
+import { getApiBaseURL } from './api';
 
 export const taskStatusEnum = {
   pending: 'pending',
@@ -8,7 +8,9 @@ export const taskStatusEnum = {
 };
 
 export async function getUserConfig() {
-  const response = await fetch(`${API_BASE_URL}/user/config`, {
+  const endpoint = `${getApiBaseURL()}/user/config`;
+
+  const response = await fetch(endpoint, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -23,7 +25,9 @@ export async function getUserConfig() {
 }
 
 export async function getUserMe(accessToken) {
-  const response = await fetch(`${API_BASE_URL}/user/me`, {
+  const endpoint = `${getApiBaseURL()}/user/me`;
+
+  const response = await fetch(endpoint, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -39,7 +43,7 @@ export async function getUserMe(accessToken) {
 }
 
 export async function getTaskDetail(id) {
-  const endpoint = `${API_BASE_URL}/user/task/${id}`;
+  const endpoint = `${getApiBaseURL()}/user/task/${id}`;
 
   const response = await fetch(endpoint, {
     method: 'GET',
@@ -56,7 +60,9 @@ export async function getTaskDetail(id) {
 }
 
 export async function triggerSync(accessToken) {
-  const response = await fetch(`${API_BASE_URL}/user/sync`, {
+  const endpoint = `${getApiBaseURL()}/user/sync`;
+
+  const response = await fetch(endpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -72,7 +78,9 @@ export async function triggerSync(accessToken) {
 }
 
 export async function saveUserConfig(config) {
-  const response = await fetch(`${API_BASE_URL}/user/config`, {
+  const endpoint = `${getApiBaseURL()}/user/config`;
+
+  const response = await fetch(endpoint, {
     method: 'PUT',
     headers: {
       'Content-Type': 'application/json',
@@ -88,7 +96,9 @@ export async function saveUserConfig(config) {
 }
 
 export async function runQuery(query) {
-  const response = await fetch(`${API_BASE_URL}/user/query`, {
+  const endpoint = `${getApiBaseURL()}/user/query`;
+
+  const response = await fetch(endpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',