Fix MERN stack integration and URL routing between React frontend and backends

Environment Configuration Updates:
- Updated MONGO_URI to use environment variables in Node.js app.js
- Fixed REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL to point to localhost:5001 (Node.js)
- Added proper quotes and escaping for MongoDB connection strings in .env files
- Fixed malformed MONGO_URI in .env.example file

Node.js Backend Improvements:
- Changed default port from 5000 to 5001 to avoid macOS AirPlay conflict
- Added root endpoint (GET /) with server status and available endpoints
- Enhanced build_and_run_local.sh script with proper environment variable loading
- Added node-fetch dependency to package.json automatically

React Frontend URL Routing Fixes:
- Fixed inconsistent routing for 'MongoDB API accessing Oracle Database' option
- GET requests now correctly use REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL (localhost:5001)
- POST requests already correctly routed to respective backends
- Updated default fallback URLs in component constants

Spring Boot Backend:
- Already properly configured with CORS and environment variables
- Endpoints remain on localhost:8080 as expected

URL Mapping Summary:
- 'SQL' option → Spring Boot (localhost:8080/accounts/*)
- 'MongoDB API accessing Oracle Database' → Node.js (localhost:5001/api/*)
- 'MongoDB API' option → Spring Boot (localhost:8080/accounts/*)

Build Scripts:
- All three services now have build_and_run_local.sh scripts
- Scripts source environment variables from financial/.env
- Proper port assignments: React(3000), Spring Boot(8080), Node.js(5001)

The full stack now correctly routes between React frontend and both backend services
with proper environment variable management and no port conflicts.

Author: paulparkinson

financial/.env.example

@@ -1,8 +1,16 @@
-# Application Configuration
 
-export REACT_APP_MERN_MONGODB_SERVICE_URL=http://localhost:8080
-export REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL=http://localhost:8080
+# Database Configuration for Spring Boot Services
+export SPRING_DATASOURCE_URL=jdbc:oracle:thin:@financialdb_high?TNS_ADMIN=/Users/pparkins/Downloads/Wallet_financialdb
+export SPRING_DATASOURCE_USERNAME=financial
+export SPRING_DATASOURCE_PASSWORD=Welcome12345
+
+# MongoDB Configuration for MERN Stack (Oracle JSON Duality View)
+export MONGO_URI="mongodb://financial:mypassword@asdf-FINANCIALDB.adb.eu-frankfurt-1.oraclecloudapps.com:27017/financial?authMechanism=PLAIN&authSource=\$external&ssl=true&retryWrites=false&loadBalanced=true"
+
+# Application Configuration
 export REACT_APP_MERN_SQL_ORACLE_SERVICE_URL=http://localhost:8080
+export REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL=http://localhost:5001
+export REACT_APP_MERN_MONGODB_SERVICE_URL=http://localhost:8080
 
 export REACT_APP_MICROTX_TRANSFER_SERVICE_URL=http://localhost:8080/accounts
 export REACT_APP_MICROTX_ACCOUNT_SERVICE_URL=http://localhost:8080/accounts
@@ -16,11 +24,6 @@ export REACT_APP_AIAGENT_VECTOR_ADVISOR_SERVICE_URL=http://localhost:8080/accoun
 export REACT_APP_SPEECH_SELECTAI_QUERY_SERVICE_URL=http://localhost:8080/accounts
 export REACT_APP_ORDS_BASE_URL=http://localhost:8080/accounts
 
-# Database Configuration for Spring Boot Services
-export SPRING_DATASOURCE_URL=jdbc:oracle:thin:@financialdb_high?TNS_ADMIN=/Users/pparkins/Downloads/Wallet_financialdb
-export SPRING_DATASOURCE_USERNAME=financial
-export SPRING_DATASOURCE_PASSWORD=Welcome12345
-
 # Display all set environment variables
 echo "=== Environment Variables Set ==="
 echo "REACT_APP_MERN_MONGODB_SERVICE_URL: $REACT_APP_MERN_MONGODB_SERVICE_URL"
@@ -40,4 +43,5 @@ echo "REACT_APP_ORDS_BASE_URL: $REACT_APP_ORDS_BASE_URL"
 echo "SPRING_DATASOURCE_URL: $SPRING_DATASOURCE_URL"
 echo "SPRING_DATASOURCE_USERNAME: $SPRING_DATASOURCE_USERNAME"
 echo "SPRING_DATASOURCE_PASSWORD: $SPRING_DATASOURCE_PASSWORD"
+echo "MONGO_URI: $MONGO_URI"
 echo "=== All environment variables have been set successfully! ==="

financial/mongodb-mern-bank-account/mern-stack/app.js

@@ -6,14 +6,14 @@ const fetch = require('node-fetch');
 
 // Initialize Express app
 const app = express();
-const PORT = 5000;
+const PORT = process.env.PORT || 5001; // Changed from 5000 to 5001 to avoid AirPlay conflict
 
 // Middleware
 app.use(bodyParser.json());
 app.use(cors());
 
 // MongoDB connection (using Oracle JSON Duality View as MongoDB API)
-const MONGO_URI = 'mongodb://financial:Welcome12345@IJ1TYZIR3WPWLPE-FINANCIALDB.adb.eu-frankfurt-1.oraclecloudapps.com:27017/financial?authMechanism=PLAIN&authSource=$external&ssl=true&retryWrites=false&loadBalanced=true';
+const MONGO_URI = process.env.MONGO_URI || 'mongodb://financial:Welcome12345@IJ1TYZIR3WPWLPE-FINANCIALDB.adb.eu-frankfurt-1.oraclecloudapps.com:27017/financial?authMechanism=PLAIN&authSource=$external&ssl=true&retryWrites=false&loadBalanced=true';
 mongoose
   .connect(MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
   .then(() => console.log('Connected to Oracle JSON Duality View via MongoDB API'))
@@ -33,6 +33,29 @@ const accountSchema = new mongoose.Schema({
 // Create the model
 const Account = mongoose.model('accounts_dv', accountSchema);
 
+// Root endpoint to verify server is running
+app.get('/', (req, res) => {
+  res.json({
+    message: 'MERN Stack Backend API is running!',
+    status: 'OK',
+    timestamp: new Date().toISOString(),
+    endpoints: {
+      'GET /': 'This status endpoint',
+      'GET /api/accounts': 'Get all accounts',
+      'POST /api/accounts': 'Create new account',
+      'GET /api/accounts/:id': 'Get account by ID',
+      'PUT /api/accounts/:id': 'Update account by ID',
+      'DELETE /api/accounts/:id': 'Delete account by ID',
+      'POST /accounts/api/accounts': 'Proxy endpoint for account creation'
+    },
+    database: {
+      type: 'Oracle Database via MongoDB API',
+      collection: 'accounts_dv',
+      connection: MONGO_URI ? 'Environment variable configured' : 'Using fallback configuration'
+    }
+  });
+});
+
 // CRUD Endpoints
 
 // Create an account

financial/mongodb-mern-bank-account/mern-stack/build_and_run_local.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+
+echo "=== Building and Running MERN Stack Node.js Backend Locally ==="
+
+# Step 1: Source environment variables from financial/.env
+echo "1. Sourcing environment variables from ../../.env"
+if [ -f "../../.env" ]; then
+    source ../../.env
+    echo "   Environment variables loaded successfully!"
+    echo "   MONGO_URI: $MONGO_URI"
+else
+    echo "   Warning: ../../.env file not found, using default configuration"
+fi
+
+# Step 2: Install dependencies if node_modules doesn't exist
+echo ""
+echo "2. Checking dependencies..."
+if [ ! -d "node_modules" ]; then
+    echo "   Installing npm dependencies..."
+    npm install
+    if [ $? -ne 0 ]; then
+        echo "   npm install failed! Exiting..."
+        exit 1
+    fi
+    echo "   Dependencies installed successfully!"
+else
+    echo "   Dependencies already installed, skipping npm install"
+fi
+
+# Step 3: Start the Node.js server
+echo ""
+echo "3. Starting MERN Stack Node.js Backend..."
+echo "   Server will be available at: http://localhost:5001"
+echo "   MongoDB API endpoints:"
+echo "   - POST/GET /api/accounts"
+echo "   - GET/PUT/DELETE /api/accounts/:id"
+echo "   Press Ctrl+C to stop the server"
+echo ""
+
+node app.js

financial/react-frontend/src/pages/Accounts.js

@@ -173,11 +173,11 @@ const PanelSection = styled.div`
   }
 `;
 
-const REACT_APP_MERN_MONGODB_SERVICE_URL = process.env.REACT_APP_MERN_MONGODB_SERVICE_URL || 'http://localhost:8080';
-const REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL =
-  process.env.REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL || 'http://localhost:5000';
 const REACT_APP_MERN_SQL_ORACLE_SERVICE_URL =
-  process.env.REACT_APP_MERN_SQL_ORACLE_SERVICE_URL || 'http://localhost:6000';
+  process.env.REACT_APP_MERN_SQL_ORACLE_SERVICE_URL || 'http://localhost:8080';
+const REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL =
+  process.env.REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL || 'http://localhost:5001';
+const REACT_APP_MERN_MONGODB_SERVICE_URL = process.env.REACT_APP_MERN_MONGODB_SERVICE_URL || 'http://localhost:8080';
 
 const Accounts = () => {
   const [formData, setFormData] = useState({
@@ -206,10 +206,10 @@ const Accounts = () => {
     let postUrl;
     if (formData.writeOption === 'SQL') {
       postUrl = `${REACT_APP_MERN_SQL_ORACLE_SERVICE_URL}/accounts/api/accounts`;
+    } else if (formData.writeOption === 'MongoDB API accessing Oracle Database') {
+      postUrl = `${REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL}/api/accounts`;
     } else if (formData.writeOption === 'MongoDB API') {
       postUrl = `${REACT_APP_MERN_MONGODB_SERVICE_URL}/accounts/api/accounts`;
-    } else if (formData.writeOption === 'MongoDB API accessing Oracle Database') {
-      postUrl = `${REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL}/accounts/api/accounts`;
     }
 
     const payload = {
@@ -261,7 +261,7 @@ const Accounts = () => {
     } else if (formData.readOption === 'MongoDB API') {
       fetchUrl = `${REACT_APP_MERN_MONGODB_SERVICE_URL}/accounts/accounts`;
     } else if (formData.readOption === 'MongoDB API accessing Oracle Database') {
-      fetchUrl = `${REACT_APP_MERN_SQL_ORACLE_SERVICE_URL}/accounts/accounts`;
+      fetchUrl = `${REACT_APP_MERN_MONGODB_JSONDUALITY_ORACLE_SERVICE_URL}/api/accounts`;
     }
 
     try {

financial/sql/mongodb-jsonduality.sql

@@ -4,12 +4,9 @@ BEGIN
 END;
 /
 
-mongodb://[user:password@]IJ1TYZIR3WPWLPE-FINANCIALDB.adb.eu-frankfurt-1.oraclecloudapps.com:27017/[user]?authMechanism=PLAIN&authSource=$external&ssl=true&retryWrites=false&loadBalanced=true
+--  example URL format... mongodb://[user:password@]IJ1TYZIR3WPWLPE-FINANCIALDB.adb.eu-frankfurt-1.oraclecloudapps.com:27017/[user]?authMechanism=PLAIN&authSource=$external&ssl=true&retryWrites=false&loadBalanced=true
 
-
-
-
---From https://docs.oracle.com/en/database/oracle/oracle-database/23/jsnvu/json-relational-duality-developers-guide.pdf
+-- also see https://docs.oracle.com/en/database/oracle/oracle-database/23/jsnvu/json-relational-duality-developers-guide.pdf
 
 
 --ACCOUNT_ID            NOT NULL NUMBER(19)