fix: update environment variable names for frontend and backend URLs in Docker commands and CORS configuration

Author: Lasim

README.md

@@ -118,6 +118,7 @@ Alternatively, you can deploy the pre-built Docker images for the frontend and b
     ```bash
     docker run -d \
       -p 3000:3000 \
+      -e DEPLOYSTACK_FRONTEND_URL="http://localhost:8080" \
       -v $(pwd)/services/backend/persistent_data:/app/persistent_data \
       deploystack/backend:latest
     ```
@@ -128,15 +129,36 @@ Alternatively, you can deploy the pre-built Docker images for the frontend and b
 
     ```bash
     docker run -d -p 8080:80 \
-      -e VITE_DEPLOYSTACK_APP_URL="http://localhost:3000" \
+      -e VITE_DEPLOYSTACK_BACKEND_URL="http://localhost:3000" \
       -e VITE_APP_TITLE="DeployStack Instance" \
       deploystack/frontend:latest
     ```
 
     **Note:**
-    - Ensure the `VITE_DEPLOYSTACK_APP_URL` points to where your backend service is accessible. If running both containers on the same Docker host, `http://localhost:3000` (or the host's IP/hostname if `localhost` doesn't resolve correctly from within the frontend container's network to the backend's exposed port) should work.
+    - Ensure the `VITE_DEPLOYSTACK_BACKEND_URL` points to where your backend service is accessible. If running both containers on the same Docker host, `http://localhost:3000` (or the host's IP/hostname if `localhost` doesn't resolve correctly from within the frontend container's network to the backend's exposed port) should work.
     - The `$(pwd)` in the backend command assumes you are in the root of the `deploystack` project directory. Adjust the path to `services/backend/persistent_data` if running from elsewhere, or use an absolute path or a Docker named volume.
 
+#### Production Deployment
+
+For production deployments on a VPS or remote server, update the environment variables to use your server's IP address:
+
+**Backend:**
+```bash
+docker run -d \
+  -p 3000:3000 \
+  -e DEPLOYSTACK_FRONTEND_URL="http://YOUR_SERVER_IP:8080" \
+  -v $(pwd)/services/backend/persistent_data:/app/persistent_data \
+  deploystack/backend:latest
+```
+
+**Frontend:**
+```bash
+docker run -d -p 8080:80 \
+  -e VITE_DEPLOYSTACK_BACKEND_URL="http://YOUR_SERVER_IP:3000" \
+  -e VITE_APP_TITLE="DeployStack Instance" \
+  deploystack/frontend:latest
+```
+
 ## Project Structure
 
 This repository uses a monorepo structure optimized for MCP server deployment:

services/backend/src/fastify/plugins/index.ts

@@ -3,17 +3,29 @@ import fastifyFavicon from 'fastify-favicon'
 import fastifyCors from '@fastify/cors'
 
 export const registerFastifyPlugins = async (server: FastifyInstance): Promise<void> => {
+  // Build allowed origins array
+  const defaultOrigins = [
+    'http://localhost:5174', // Vite dev server (actual dev port)
+    'http://localhost:3000', // Frontend production (if served from same port)
+    'http://localhost:4173', // Vite preview
+  ];
+  
+  // Add frontend URL from environment variable
+  const frontendUrl = process.env.DEPLOYSTACK_FRONTEND_URL;
+  if (frontendUrl) {
+    defaultOrigins.push(frontendUrl);
+  }
+  
   // Register CORS plugin
   await server.register(fastifyCors, {
-    origin: [
-      'http://localhost:5173', // Vite dev server
-      'http://localhost:3000', // Frontend production (if served from same port)
-      'http://localhost:4173', // Vite preview
-    ],
+    origin: defaultOrigins,
     credentials: true,
     methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
   })
 
+  // Log the allowed origins for debugging
+  server.log.info(`CORS configured with origins: ${defaultOrigins.join(', ')}`);
+  
   // Register favicon plugin
   await server.register(fastifyFavicon, {
     path: '../shared/public/img',

services/frontend/src/services/database.ts

@@ -6,7 +6,7 @@ class DatabaseService {
   private storageKey: string;
 
   constructor() {
-    this.baseUrl = getEnv('VITE_DEPLOYSTACK_APP_URL') || 'http://localhost:3000';
+    this.baseUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL') || 'http://localhost:3000';
     this.storageKey = `deploystack_db_setup_status_${this.baseUrl}`;
   }