fix up some urls for deployment

Author: Zachery Thomas Richardet

src/components/PrecomputedExamples.vue

@@ -88,10 +88,10 @@ const displayGeoJSON = (geojson: GeoJSONResponse) => {
 const handleExampleRequest = async () => {
   isProcessing.value = true
   message.value = { type: 'loading', text: 'Processing example...' }
-
+  const apiBaseUrl = import.meta.env.PROD ? import.meta.env.VITE_API_BASE_URL : '/api'
   try {
     const token = generateJWT()
-    const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/example`, {
+    const response = await fetch(`${apiBaseUrl}/example`, {
       method: 'PUT',
       headers: {
         'Content-Type': 'application/json',

src/components/RunInference.vue

@@ -179,7 +179,9 @@ const handleCompareTiles = async () => {
     const token = generateJWT()
 
     // Create project
-    const createResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL}/projects`, {
+    const apiBaseUrl = import.meta.env.PROD ? import.meta.env.VITE_API_BASE_URL : '/api'
+
+    const createResponse = await fetch(`${apiBaseUrl}/projects`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -217,7 +219,7 @@ const handleCompareTiles = async () => {
         const formData = new FormData()
         formData.append('file', imageBlob)
 
-        return fetch(`${import.meta.env.VITE_API_BASE_URL}/projects/${projectId}/images/a`, {
+        return fetch(`${apiBaseUrl}/projects/${projectId}/images/a`, {
           method: 'PUT',
           headers: {
             'Access-Control-Allow-Origin': '*',
@@ -233,7 +235,7 @@ const handleCompareTiles = async () => {
         const formData = new FormData()
         formData.append('file', imageBlob)
 
-        return fetch(`${import.meta.env.VITE_API_BASE_URL}/projects/${projectId}/images/b`, {
+        return fetch(`${apiBaseUrl}/projects/${projectId}/images/b`, {
           method: 'PUT',
           headers: {
             'Access-Control-Allow-Origin': '*',
@@ -257,29 +259,26 @@ const handleCompareTiles = async () => {
     }
     const {
       models: [{ id: modelId }],
-    } = await fetch(`${import.meta.env.VITE_API_BASE_URL}`, {
+    } = await fetch(`${apiBaseUrl}`, {
       headers: {
         'Access-Control-Allow-Origin': '*',
         Authorization: `Bearer ${token}`,
       },
     }).then((res) => res.json())
 
     // Run inference
-    const inferenceResponse = await fetch(
-      `${import.meta.env.VITE_API_BASE_URL}/projects/${projectId}/inference`,
-      {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          model: modelId,
-          bbox: drawnExtent.value ?? [0, 0, 0, 0],
-          images: [firstTile.thumbnailUrl, secondTile.thumbnailUrl],
-        }),
+    const inferenceResponse = await fetch(`${apiBaseUrl}/projects/${projectId}/inference`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
       },
-    )
+      body: JSON.stringify({
+        model: modelId,
+        bbox: drawnExtent.value ?? [0, 0, 0, 0],
+        images: [firstTile.thumbnailUrl, secondTile.thumbnailUrl],
+      }),
+    })
 
     if (!inferenceResponse.ok) {
       throw new Error(`Failed to run inference: ${inferenceResponse.statusText}`)
@@ -288,15 +287,12 @@ const handleCompareTiles = async () => {
     // Start polling for project status
     const pollInterval = setInterval(async () => {
       try {
-        const statusResponse = await fetch(
-          `${import.meta.env.VITE_API_BASE_URL}/projects/${projectId}`,
-          {
-            headers: {
-              'Access-Control-Allow-Origin': '*',
-              Authorization: `Bearer ${token}`,
-            },
+        const statusResponse = await fetch(`${apiBaseUrl}/projects/${projectId}`, {
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            Authorization: `Bearer ${token}`,
           },
-        )
+        })
         if (!statusResponse.ok) {
           throw new Error(`Failed to fetch project status: ${statusResponse.statusText}`)
         }
@@ -307,15 +303,12 @@ const handleCompareTiles = async () => {
           clearInterval(pollInterval)
 
           // Fetch inference results
-          const resultsResponse = await fetch(
-            `${import.meta.env.VITE_API_BASE_URL}/projects/${projectId}/inference`,
-            {
-              headers: {
-                'Access-Control-Allow-Origin': '*',
-                Authorization: `Bearer ${token}`,
-              },
+          const resultsResponse = await fetch(`${apiBaseUrl}/projects/${projectId}/inference`, {
+            headers: {
+              'Access-Control-Allow-Origin': '*',
+              Authorization: `Bearer ${token}`,
             },
-          )
+          })
           if (!resultsResponse.ok) {
             throw new Error(`Failed to fetch inference results: ${resultsResponse.statusText}`)
           }

vite.config.ts

@@ -17,13 +17,20 @@ export default defineConfig(({ mode }) => {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
       },
     },
-    base: env.VITE_BASE_URL || '/',
+    base: mode === 'production' ? '/ftw-inference-app/' : '/',
     optimizeDeps: {
       include: ['ol/ol.css'],
     },
     server: {
       port: 5173,
       host: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_API_BASE_URL,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+      },
     },
   }
 })