fix: Remove backend URL references and configure proxy for API endpoints

Caddyfile

@@ -1,8 +1,5 @@
 # Replace with your domain
 {$DOMAIN:localhost} {
-    # Enable HTTP/3
-    protocols h1 h2 h3
-
     # Logging
     log {
         output file /var/log/caddy/access.log

frontend/src/components/app/Settings/Settings.tsx

@@ -12,7 +12,7 @@ export const Settings: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
   // create a effect to get the user settings
   useEffect(() => {
     const fetchSettings = async () => {
-      const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/settings`);
+      const response = await fetch(`/settings`);
       if (response.ok) {
         const data = await response.json();
         setApiKey(data.data.settings.apiKey);

frontend/src/components/app/dialogs/ConfirmApiKeyUpdate.tsx

@@ -12,7 +12,7 @@ export const ConfirmApiKeyUpdate: React.FC<{
 
   const generateApiKey = async () => {
     try {
-      const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/settings/apikey`, {
+      const response = await fetch(`/settings/apikey`, {
         method: "PUT",
         headers: {
           "Content-Type": "application/json",

frontend/src/components/app/dialogs/CreateChannelDialog.tsx

@@ -17,7 +17,7 @@ export const CreateChannelDialog: React.FC<{
   const addChannel = async (name: string) => {
     try {
       const response = await fetch(
-        `${import.meta.env.VITE_BACKEND_URL}/api/projects/${selectedProject?.id}/channels`,
+        `/api/projects/${selectedProject?.id}/channels`,
         {
           method: "POST",
           headers: {

frontend/src/components/app/dialogs/CreateProjectDialog.tsx

@@ -42,7 +42,7 @@ export const CreateProjectDialog: React.FC<{
 
   const addProject = async (name: string) => {
     try {
-      const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/projects`, {
+      const response = await fetch(`/api/projects`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",

frontend/src/context/AuthContext.tsx

@@ -41,11 +41,11 @@ export const AuthContextProvider: React.FC<{ children: ReactNode }> = ({ childre
   const { doFetch } = useFetch();
 
   const handleLoginClick = (provider: string): void => {
-    window.open(`${import.meta.env.VITE_BACKEND_URL}/auth/${provider}`, "_self");
+    window.open(`/auth/${provider}`, "_self");
   };
 
   const handleLogoutClick = (): void => {
-    window.open(`${import.meta.env.VITE_BACKEND_URL}/auth/logout`, "_self");
+    window.open(`/auth/logout`, "_self");
   };
 
   useEffect(() => {
@@ -62,7 +62,7 @@ export const AuthContextProvider: React.FC<{ children: ReactNode }> = ({ childre
         });
       },
       onFinally: () => setLoadingInitial(false),
-      url: `${import.meta.env.VITE_BACKEND_URL}/auth/is-auth/`,
+      url: `/auth/is-auth/`,
       method: "GET",
     });
   }, [doFetch]);

frontend/src/pages/app/ChannelPage.tsx

@@ -47,9 +47,9 @@ export const ChannelPage: React.FC = () => {
 
         let url = "";
         if (channelId && channelId !== undefined) {
-          url = `${import.meta.env.VITE_BACKEND_URL}/api/channels/${channelId}/events`;
+          url = `/api/channels/${channelId}/events`;
         } else {
-          url = `${import.meta.env.VITE_BACKEND_URL}/api/projects/${selectedProject.id}/events`;
+          url = `/api/projects/${selectedProject.id}/events`;
         }
 
         const response = await fetch(url);

frontend/src/pages/app/DashboardLayout.tsx

@@ -13,8 +13,8 @@ export const DashboardLayout: React.FC = () => {
   useEffect(() => {
     const fetchProjectsAndChannels = async () => {
       try {
-        const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/projects`);
-        const responseChannels = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/channels`);
+        const response = await fetch(`/api/projects`);
+        const responseChannels = await fetch(`/api/channels`);
 
         if (!response.ok || !responseChannels.ok) {
           setLoadingProjectsChannels(false);

frontend/src/pages/app/EventDetailPage.tsx

@@ -42,7 +42,7 @@ export const EventDetailPage: React.FC = () => {
           return;
         }
 
-        const url = `${import.meta.env.VITE_BACKEND_URL}/api/events/${eventId}`;
+        const url = `/api/events/${eventId}`;
 
         const response = await fetch(url);
 

frontend/src/pages/app/ProjectHome.tsx

@@ -25,7 +25,7 @@ export const ProjectHome: React.FC = () => {
           return;
         }
 
-        const url = `${import.meta.env.VITE_BACKEND_URL}/api/projects/${selectedProject.id}/events`;
+        const url = `/api/projects/${selectedProject.id}/events`;
         const response = await fetch(url);
 
         if (!response.ok) {

frontend/src/vite-env.d.ts

@@ -5,7 +5,7 @@ interface ViteTypeOptions {
 }
 
 interface ImportMetaEnv {
-  readonly VITE_BACKEND_URL: string;
+
 }
 
 interface ImportMeta {

frontend/vite.config.ts

@@ -5,6 +5,22 @@ import tailwindcss from '@tailwindcss/vite'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:4000',
+        changeOrigin: true,
+      },
+      '/auth': {
+        target: 'http://localhost:4000',
+        changeOrigin: true,
+      },
+      '/settings': {
+        target: 'http://localhost:4000',
+        changeOrigin: true,
+      },
+    },
+  },
   build: {
     outDir: 'dist',
     rollupOptions: {