servers for react apps

ssundahlTTD · ssundahlTTD · commit b4c8dba0c4c6 · 2025-12-01T11:49:37.000-07:00
diff --git a/web-integrations/google-secure-signals/react-client-side/Dockerfile b/web-integrations/google-secure-signals/react-client-side/Dockerfile
@@ -5,7 +5,12 @@ WORKDIR /usr/src/app
 COPY package*.json ./
 RUN npm install
 
-COPY . ./
+COPY src ./src
+COPY public ./public
+COPY server.js ./
+
+# Build the React app
+RUN npm run build
 
 EXPOSE 3044
 ENV PORT=3044
diff --git a/web-integrations/google-secure-signals/react-client-side/package.json b/web-integrations/google-secure-signals/react-client-side/package.json
@@ -26,7 +26,8 @@
     "glob": "^11.1.0"
   },
   "scripts": {
-    "start": "PORT=3044 dotenv -e ../../../.env -- react-scripts start",
+    "start": "node server.js",
+    "dev": "PORT=3044 dotenv -e ../../../.env -- react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/web-integrations/google-secure-signals/react-client-side/public/index.html b/web-integrations/google-secure-signals/react-client-side/public/index.html
@@ -5,15 +5,12 @@
     <link rel="shortcut icon" href="images/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <head>
-      <script src="%REACT_APP_UID_JS_SDK_URL%"></script>
-      <script
-        type="text/javascript"
-        src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
-      ></script>
-    </head>
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
+    <script src="__UID_JS_SDK_URL_PLACEHOLDER__"></script>
+    <script
+      type="text/javascript"
+      src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
+    ></script>
+    <link rel="manifest" href="__PUBLIC_URL_PLACEHOLDER__/manifest.json" />
     <title>React Client-Side UID2 SDK Integration Example with Google Secure Signals</title>
   </head>
   <body>
diff --git a/web-integrations/google-secure-signals/react-client-side/server.js b/web-integrations/google-secure-signals/react-client-side/server.js
@@ -2,21 +2,75 @@ require('dotenv').config({ path: '../../../.env' });
 
 console.log('process.env', process.env);
 
-const ejs = require('ejs');
-
+const fs = require('fs');
+const path = require('path');
 const express = require('express');
 
 const app = express();
 
 const port = process.env.PORT || 3044;
 
-app.engine('.html', ejs.__express);
-app.set('view engine', 'html');
+// Healthcheck endpoint for Kubernetes probes - must be before all other routes and middleware
+app.get('/ops/healthcheck', (req, res) => {
+  console.log('Healthcheck endpoint hit');
+  res.type('text/plain');
+  res.status(200).send('healthy\n');
+  return; // Explicit return to prevent further processing
+});
+
+// Helper function to serve index.html with environment variable replacement
+function serveIndexHtml(req, res) {
+  // Try build directory first (production), then public (development)
+  let indexPath = path.join(__dirname, 'build', 'index.html');
+  if (!fs.existsSync(indexPath)) {
+    indexPath = path.join(__dirname, 'public', 'index.html');
+  }
+  
+  let html = fs.readFileSync(indexPath, 'utf8');
+  
+  // Replace environment variable placeholders
+  const uidJsSdkUrl = process.env.REACT_APP_UID_JS_SDK_URL || 'https://cdn.integ.uidapi.com/uid2-sdk-4.0.1.js';
+  const publicUrl = process.env.PUBLIC_URL || '';
+  
+  // Replace placeholders (using __PLACEHOLDER__ format to avoid React build processing)
+  html = html.replace(/__UID_JS_SDK_URL_PLACEHOLDER__/g, uidJsSdkUrl);
+  html = html.replace(/__PUBLIC_URL_PLACEHOLDER__/g, publicUrl);
+  
+  // Debug: log if replacement happened
+  if (html.includes('__UID_JS_SDK_URL_PLACEHOLDER__')) {
+    console.warn('Warning: Placeholder __UID_JS_SDK_URL_PLACEHOLDER__ was not replaced in', indexPath);
+  }
+  
+  res.send(html);
+}
+
+// Route handler for index - must be before static middleware
+app.get('/', serveIndexHtml);
+
+// Serve static files from build directory (production) or public (development)
+const buildPath = path.join(__dirname, 'build');
+const publicPath = path.join(__dirname, 'public');
 
-app.use(express.static('public', { type: 'application/javascript' }));
+if (fs.existsSync(buildPath)) {
+  // Production: serve from build directory (but exclude index.html to use our handler)
+  app.use(express.static(buildPath, {
+    index: false // Don't serve index.html automatically
+  }));
+} else {
+  // Development: serve from public directory
+  app.use(express.static(publicPath, {
+    index: false // Don't serve index.html automatically
+  }));
+}
 
-app.get('/', (req, res) => {
-  res.render('index', {});
+// Catch-all handler for React Router (must be last, but excludes /ops/* routes)
+app.get('*', (req, res, next) => {
+  // Don't serve index.html for /ops/* routes
+  if (req.path.startsWith('/ops/')) {
+    console.log('Catch-all skipping /ops/ route:', req.path);
+    return next();
+  }
+  serveIndexHtml(req, res);
 });
 
 app.listen(port, () => {
diff --git a/web-integrations/javascript-sdk/react-client-side/Dockerfile b/web-integrations/javascript-sdk/react-client-side/Dockerfile
@@ -11,6 +11,10 @@ RUN npm install
 # Copy source files
 COPY src ./src
 COPY public ./public
+COPY server.js ./
+
+# Build the React app
+RUN npm run build
 
 # Expose port
 EXPOSE 3034
diff --git a/web-integrations/javascript-sdk/react-client-side/package.json b/web-integrations/javascript-sdk/react-client-side/package.json
@@ -26,7 +26,8 @@
     "glob": "^11.1.0"
   },
   "scripts": {
-    "start": "PORT=3034 dotenv -e ../../../.env -- react-scripts start",
+    "start": "node server.js",
+    "dev": "PORT=3034 dotenv -e ../../../.env -- react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/web-integrations/javascript-sdk/react-client-side/public/index.html b/web-integrations/javascript-sdk/react-client-side/public/index.html
@@ -2,18 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/images/favicon.png" />
+    <link rel="icon" href="__PUBLIC_URL_PLACEHOLDER__/images/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="React Client-Side UID2/EUID Integration Example using JavaScript SDK"
     />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="__PUBLIC_URL_PLACEHOLDER__/manifest.json" />
     <title>React Client-Side Integration Example using JavaScript SDK</title>
     
     <!-- Load UID2/EUID SDK from CDN -->
-    <script src="%REACT_APP_UID_JS_SDK_URL%"></script>
+    <script src="__UID_JS_SDK_URL_PLACEHOLDER__"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
