feat: responsive desing

feat: load api from .env

kittyurl-frontend/vite.config.ts

@@ -1,40 +1,50 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import path from 'path' // Importuj moduł path
 
-export default defineConfig({
-    plugins: [
-        react(),
-        tailwindcss(),
-    ],
-    server: {
-        port: 6568,
-        proxy: {
-            '/api': {
-                target: 'https://ktty.is',
-                changeOrigin: true,
-                secure: false,
-                // Dodatkowe nagłówki pomagają oszukać zabezpieczenia serwera (np. Cloudflare)
-                headers: {
-                    'Origin': 'https://ktty.is',
-                    'Referer': 'https://ktty.is/'
-                },
-                configure: (proxy) => {
-                    proxy.on('error', (err) => {
-                        console.log('[Proxy Error]:', err.message);
-                    });
-                    proxy.on('proxyReq', (_, req) => {
-                        console.log(`[Proxy] Wysyłam do zdalnego serwera: ${req.method} ${req.url}`);
-                    });
-                    proxy.on('proxyRes', (proxyRes, req) => {
-                        console.log(`[Proxy] Odpowiedź z ktty.is: ${proxyRes.statusCode} ${req.url}`);
-                    });
-                },
+export default defineConfig(({ mode }) => {
+    // Ustawiamy ścieżkę do folderu, w którym faktycznie znajduje się plik .env
+    // path.resolve(__dirname, '..') oznacza: "wyjdź jeden poziom wyżej względem tego pliku"
+    const envDirectory = path.resolve(__dirname, '..');
+
+    // Ładujemy env z określonej lokalizacji
+    const env = loadEnv(mode, envDirectory, '');
+
+    const apiTarget = env.VITE_API_TARGET;
+
+    return {
+        plugins: [
+            react(),
+            tailwindcss(),
+        ],
+        server: {
+            port: 6568,
+            proxy: {
+                '/api': {
+                    target: apiTarget,
+                    changeOrigin: true,
+                    secure: false,
+                    headers: {
+                        'Origin': apiTarget,
+                        'Referer': `${apiTarget}/`
+                    },
+                    configure: (proxy) => {
+                        proxy.on('error', (err) => {
+                            console.log('[Proxy Error]:', err.message);
+                        });
+                        proxy.on('proxyReq', (_, req) => {
+                            console.log(`[Proxy] Wysyłam do: ${apiTarget}${req.url}`);
+                        });
+                        proxy.on('proxyRes', (proxyRes, req) => {
+                            console.log(`[Proxy] Odpowiedź: ${proxyRes.statusCode} ${req.url}`);
+                        });
+                    },
+                }
             }
-        }
-    },
-    preview: {
-        port: 6568,      
-        
-    },
+        },
+        preview: {
+            port: 6568,
+        },
+    }
 })