Adapt for base URL that could be /

Author: tim-webflow

astro.config.mjs

@@ -4,12 +4,12 @@ import cloudflare from "@astrojs/cloudflare";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@astrojs/react";
 
+const BASE_URL = process.env.BASE_URL || "/";
+const base = BASE_URL.endsWith('/') ? BASE_URL : BASE_URL + '/';
+
 // https://astro.build/config
 export default defineConfig({
-  base: "/app",
-  build: {
-    assetsPrefix: "/app",
-  },
+  base,
   security: {
     checkOrigin: false,
   },
@@ -33,4 +33,4 @@ export default defineConfig({
         : undefined,
     },
   },
-});
+});

src/components/FileUploader.tsx

@@ -20,6 +20,9 @@ export default function FileUploader() {
     "simple"
   );
 
+  const assetsPrefix = import.meta.env.BASE_URL.endsWith('/') ?
+    import.meta.env.BASE_URL : import.meta.env.BASE_URL + '/';
+
   // File type icons mapping
   const fileIcons: Record<string, string> = {
     pdf: "📄",
@@ -70,7 +73,7 @@ export default function FileUploader() {
   const loadFiles = async () => {
     try {
       setLoading(true);
-      const response = await fetch(`${import.meta.env.BASE_URL}/api/list-assets`);
+      const response = await fetch(`${assetsPrefix}api/list-assets`);
 
       if (!response.ok) {
         throw new Error("Failed to load files");
@@ -119,7 +122,7 @@ export default function FileUploader() {
       formData.append("file", file);
 
 
-      const response = await fetch(`${import.meta.env.BASE_URL}/api/upload`, {
+      const response = await fetch(`${assetsPrefix}api/upload`, {
         method: "POST",
         body: formData,
       });
@@ -154,8 +157,7 @@ export default function FileUploader() {
     setProgress(0);
 
     try {
-      const assetsPrefix = import.meta.env.ASSETS_PREFIX || "";
-      const BASE_CF_URL = `${assetsPrefix}/api/multipart-upload`;
+      const BASE_CF_URL = `${assetsPrefix}api/multipart-upload`;
       const key = file.name;
       const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
       const totalParts = Math.ceil(file.size / CHUNK_SIZE);
@@ -527,7 +529,7 @@ export default function FileUploader() {
               const fileLink =
                 file.link ||
                 (file.key
-                  ? `${import.meta.env.ASSETS_PREFIX}/api/asset?key=${file.key}`
+                  ? `${assetsPrefix}api/asset?key=${file.key}`
                   : "");
               const uploadDate =
                 file.dateUploaded || file.uploaded || new Date().toISOString();

src/pages/files.astro

@@ -1,8 +1,5 @@
 ---
 import Layout from '../layouts/Layout.astro';
-
-// Get the assets prefix from environment
-const assetsPrefix = Astro.locals.runtime?.env?.ASSETS_PREFIX || '/app';
 ---
 
 <Layout title="File Uploader">
@@ -76,7 +73,7 @@ const assetsPrefix = Astro.locals.runtime?.env?.ASSETS_PREFIX || '/app';
 </Layout>
 
 <script>
-	const assetsPrefix = '${assetsPrefix}';
+	const assetsPrefix = import.meta.env.BASE_URL;
 
 	// DOM elements
 	const uploadForm = document.getElementById('uploadForm') as HTMLFormElement;
@@ -161,7 +158,7 @@ const assetsPrefix = Astro.locals.runtime?.env?.ASSETS_PREFIX || '/app';
 			loadingFiles.classList.remove('hidden');
 			filesList.innerHTML = '';
 
-			const response = await fetch(`${assetsPrefix}/api/list-assets`);
+			const response = await fetch(`${assetsPrefix}api/list-assets`);
 			if (!response.ok) {
 				throw new Error('Failed to load files');
 			}
@@ -244,7 +241,7 @@ const assetsPrefix = Astro.locals.runtime?.env?.ASSETS_PREFIX || '/app';
 				progressBar.style.width = `${progress}%`;
 				progressText.textContent = `Uploading ${file.name}...`;
 
-				const response = await fetch(`${assetsPrefix}/api/upload`, {
+				const response = await fetch(`${assetsPrefix}api/upload`, {
 					method: 'POST',
 					body: formData
 				});