feat: support configurable CORS proxy server (#383)

Dockerfile

@@ -1,10 +1,18 @@
 # Step 1: Build the application
 FROM node:20-alpine as builder
 
-WORKDIR /app
+ARG VITE_PROXY_SERVER
-COPY . .
+ENV VITE_PROXY_SERVER=${VITE_PROXY_SERVER}
 
-RUN npm install && npm run build
+WORKDIR /app
+
+# Copy package files first
+COPY package*.json ./
+RUN npm install
+
+# Copy the source code to prevent invaliding cache whenever there is a change in the code
+COPY . .
+RUN npm run build
 
 # Step 2: Final container with Nginx and embedded config
 FROM nginx:alpine

docker-compose.yml

@@ -6,6 +6,23 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        VITE_PROXY_SERVER: http://localhost:8090
     ports:
       - "8089:80"
     restart: unless-stopped
+    networks:
+        - jumble
+
+  proxy-server:
+    image: ghcr.io/danvergara/jumble-proxy-server:latest
+    environment:
+      - ALLOW_ORIGIN=http://localhost:8089
+      - PORT=8080
+    ports:
+      - "8090:8080"
+    networks:
+        - jumble
+
+networks:
+  jumble:

src/hooks/useFetchWebMetadata.tsx

@@ -4,6 +4,10 @@ import webService from '@/services/web.service'
 
 export function useFetchWebMetadata(url: string) {
   const [metadata, setMetadata] = useState<TWebMetadata>({})
+  const proxyServer = import.meta.env.VITE_PROXY_SERVER
+  if (proxyServer) {
+    url = `${proxyServer}/sites/${encodeURIComponent(url)}` 
+  }
 
   useEffect(() => {
     webService.fetchWebMetadata(url).then((metadata) => setMetadata(metadata))