Simplify deployment to single Express service (ATXP-258) (#15)

* Simplify deployment architecture to single Express service

- **Single-service architecture**: Express server now serves both API endpoints and React frontend
- **Simplified deployment**: Eliminates inter-service hostname issues across all platforms
- **Enhanced static file serving**: Robust path resolution with fallback handling
- **Updated documentation**: README reflects single-service production architecture
- **Optimized configurations**: Vercel and Render configs now use single service deployment
- **Streamlined npm scripts**: `npm start` builds and runs single production server

Closes ATXP-258

Author: robdimarco-atxp

README.md

@@ -30,11 +30,11 @@ agent-demo/
 
 ## Features
 
-- **Express Backend**: RESTful API with endpoints for text submission and retrieval
+- **Full-Stack Express**: Single Express server serves both API endpoints and React frontend
 - **React Frontend**: Modern, responsive UI with real-time updates
 - **Development Mode**: Hot reloading for both frontend and backend
-- **Production Ready**: Build system for deployment
-- **CORS Enabled**: Cross-origin requests supported
+- **Production Ready**: Single-service deployment with built-in static file serving
+- **CORS Enabled**: Cross-origin requests supported for development
 - **Error Handling**: Comprehensive error handling and user feedback
 
 ## API Endpoints
@@ -90,14 +90,15 @@ After deploying, you'll need to provide your ATXP connection string through the
 
 ### Production Mode
 
-To run in production mode (with optimized builds and single browser opening):
+To run in production mode (single server serving both API and frontend):
 ```bash
-npm run start
+npm run build
+npm start
 ```
 
-This runs the built backend and frontend in production mode without React StrictMode's double-mounting behavior.
+This builds both components and starts the Express server in production mode, serving both the API endpoints and the React frontend from a single service.
 
-### Running Separately
+### Running Separately (Development Only)
 
 - **Backend only**: `npm run server`
 - **Frontend only**: `npm run client`
@@ -114,6 +115,12 @@ This runs the built backend and frontend in production mode without React Strict
    npm start
    ```
 
+   The server will start on the configured port (default: 3001) and serve both:
+   - API endpoints at `/api/*`
+   - React frontend at all other routes
+
+**Note**: Always run `npm run build` before `npm start` to ensure you have the latest production builds.
+
 ## Environment Variables
 
 ### Backend Configuration
@@ -124,7 +131,7 @@ Create a `.env` file in the `backend/` directory:
 # Server port configuration
 PORT=3001
 
-# Frontend port (for CORS configuration)
+# Frontend port (for CORS configuration in development)
 FRONTEND_PORT=3000
 
 NODE_ENV=development
@@ -134,18 +141,20 @@ NODE_ENV=development
 #ATXP_CONNECTION_STRING=your_connection_string_here
 ```
 
-### Frontend Configuration
+### Frontend Configuration (Development Only)
 
-Create a `.env` file in the `frontend/` directory:
+For development mode, create a `.env` file in the `frontend/` directory:
 
 ```env
 # Frontend development server port
 PORT=3000
 
-# Backend server port (for API calls)
+# Backend server port (for API calls during development)
 REACT_APP_BACKEND_PORT=3001
 ```
 
+**Note**: In production mode, the frontend is served by the Express server, so frontend environment variables are not needed.
+
 ### Custom Port Configuration
 
 By default, the application runs on:

backend/server.ts

@@ -2,6 +2,7 @@ import express, { Request, Response } from 'express';
 import cors from 'cors';
 import bodyParser from 'body-parser';
 import path from 'path';
+import fs from 'fs';
 import dotenv from 'dotenv';
 import { sendSSEUpdate, addSSEClient, removeSSEClient, sendStageUpdate, sendPaymentUpdate } from './stage';
 
@@ -390,12 +391,40 @@ app.get('/api/validate-connection', (req: Request, res: Response) => {
   }
 });
 
+// Helper to resolve static path for frontend build
+function getStaticPath() {
+  // Try ./frontend/build first (works when running from project root in development)
+  let candidate = path.join(__dirname, './frontend/build');
+  if (fs.existsSync(candidate)) {
+    return candidate;
+  }
+  // Try ../frontend/build (works when running from backend/ directory)
+  candidate = path.join(__dirname, '../frontend/build');
+  if (fs.existsSync(candidate)) {
+    return candidate;
+  }
+  // Try ../../frontend/build (works when running from backend/dist/ in production)
+  candidate = path.join(__dirname, '../../frontend/build');
+  if (fs.existsSync(candidate)) {
+    return candidate;
+  }
+  // Fallback: throw error
+  throw new Error('No frontend build directory found. Make sure to run "npm run build" first.');
+}
+
 // Serve static files in production
 if (process.env.NODE_ENV === 'production') {
-  app.use(express.static(path.join(__dirname, '../frontend/build')));
+  // Add static file serving middleware
+  app.use(express.static(getStaticPath()));
 
+  // Handle client-side routing by serving index.html for non-API routes
   app.get('*', (req: Request, res: Response) => {
-    res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
+    // Only serve index.html for non-API routes
+    if (!req.path.startsWith('/api/')) {
+      res.sendFile(path.join(getStaticPath(), 'index.html'));
+    } else {
+      res.status(404).json({ error: 'API endpoint not found' });
+    }
   });
 }
 

package.json

@@ -5,11 +5,11 @@
   "main": "index.js",
   "scripts": {
     "dev": "concurrently \"npm run server\" \"npm run client\"",
-    "start": "concurrently \"npm run server:prod\" \"npm run client:prod\"",
+    "start": "npm run server:prod",
     "server": "cd backend && npm run dev",
     "server:prod": "cd backend && npm start",
     "client": "cd frontend && npm start",
-    "client:prod": "cd frontend && NODE_ENV=production npm start",
+    "client:prod": "echo 'In production mode, frontend is served by backend. Use npm start instead.'",
     "build": "npm run build:backend && npm run build:frontend",
     "build:backend": "cd backend && npm run build",
     "build:frontend": "cd frontend && npm run build",

render.yaml

@@ -1,30 +1,13 @@
 services:
   - type: web
-    name: atxp-express-backend
+    name: atxp-express-app
     runtime: node
     plan: free
-    buildCommand: cd backend && npm install && npm run build
+    buildCommand: npm run install-all && npm run build
     startCommand: cd backend && npm start
     envVars:
       - key: NODE_ENV
         value: production
       - key: PORT
         value: 10000
-      - key: FRONTEND_PORT
-        value: 3000
-    healthCheckPath: /api/health
-
-  - type: web
-    name: atxp-express-frontend
-    runtime: static
-    buildCommand: cd frontend && npm install && npm run build
-    staticPublishPath: frontend/build
-    routes:
-      - type: rewrite
-        source: /api/*
-        # TODO: Replace 'atxp-express-backend' with your actual backend service name
-        # The backend service URL will be: https://YOUR-BACKEND-SERVICE-NAME.onrender.com
-        destination: https://atxp-express-backend.onrender.com/api/*
-      - type: rewrite
-        source: /*
-        destination: /index.html
+    healthCheckPath: /api/health

vercel.json

@@ -5,28 +5,17 @@
       "src": "backend/server.ts",
       "use": "@vercel/node",
       "config": {
-        "includeFiles": ["backend/**"]
-      }
-    },
-    {
-      "src": "frontend/package.json",
-      "use": "@vercel/static-build",
-      "config": {
-        "buildCommand": "npm run build",
-        "outputDirectory": "build"
+        "includeFiles": ["backend/**", "frontend/build/**"]
       }
     }
   ],
   "routes": [
-    {
-      "src": "/api/(.*)",
-      "dest": "/backend/server.ts"
-    },
     {
       "src": "/(.*)",
-      "dest": "/frontend/$1"
+      "dest": "/backend/server.ts"
     }
   ],
+  "installCommand": "npm run install-all && npm run build",
   "env": {
     "NODE_ENV": "production"
   },