Dockerfile

@@ -78,10 +78,16 @@ RUN mkdir -p /build/web/photos /build/web/accounts /build/web/auth /build/web/ca
 
 FROM cloudron/base:5.0.0@sha256:04fd70dbd8ad6149c19de39e35718e024417c3e01dc9c6637eaf4a41ec4e596c
 
-# Install necessary packages
+# Install necessary packages (excluding golang as we'll install it manually)
 RUN apt-get update && \
     apt-get install -y curl git nodejs npm libsodium23 libsodium-dev pkg-config postgresql-client && \
     npm install -g yarn serve && \
+    # Install Caddy instead of NGINX
+    apt-get install -y debian-keyring debian-archive-keyring apt-transport-https && \
+    curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg && \
+    curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | tee /etc/apt/sources.list.d/caddy-stable.list && \
+    apt-get update && \
+    apt-get install -y caddy && \
     apt-get clean && apt-get autoremove && \
     rm -rf /var/cache/apt /var/lib/apt/lists
 
@@ -137,8 +143,11 @@ ADD config.template.yaml /app/pkg/
 # Set proper permissions
 RUN chmod +x /app/pkg/start.sh
 
-# Expose the API port
+# Create NGINX directories
-EXPOSE 8080
+RUN mkdir -p /etc/nginx/sites-available /etc/nginx/sites-enabled
+
+# Expose the web port (Cloudron expects port 3080 now)
+EXPOSE 3080
 
 # Start the application
 CMD ["/app/pkg/start.sh"] 

start.sh

@@ -1,14 +1,14 @@
 #!/bin/bash
 
 # Better signal handling - forward signals to child processes
-trap 'kill -TERM $SERVER_PID; exit' TERM INT
+trap 'kill -TERM $SERVER_PID; kill -TERM $NGINX_PID; exit' TERM INT
 
 set -eu
 
 echo "==> Starting Ente Cloudron app..."
 
 # Create necessary directories
-mkdir -p /app/data/config /app/data/storage /app/data/go /app/data/logs
+mkdir -p /app/data/config /app/data/storage /app/data/caddy /app/data/go /app/data/logs
 
 # Add comment about Cloudron filesystem limitations
 echo "==> NOTE: Running in Cloudron environment with limited write access"
@@ -211,6 +211,13 @@ sed -i \
 sed -i 's|storage.type: "local"|storage.type: "s3"|g' /app/data/config/config.yaml
 sed -i 's|s3.are_local_buckets: true|s3.are_local_buckets: false|g' /app/data/config/config.yaml
 
+# Install or verify required packages
+echo "==> Checking for required packages"
+if ! command -v nginx &> /dev/null; then
+    echo "==> Installing NGINX"
+    apt-get update && apt-get install -y nginx
+fi
+
 # Set up the API endpoint for the web apps
 API_ENDPOINT="${CLOUDRON_APP_ORIGIN}/api"
 echo "==> Setting API endpoint to $API_ENDPOINT"
@@ -225,19 +232,388 @@ echo "==> Set environment variables for web apps"
 # Create directory for configuration files
 mkdir -p /app/data/public
 mkdir -p /app/data/scripts
-mkdir -p /app/data/logs
+mkdir -p /app/data/nginx
+mkdir -p /app/data/logs/nginx
+
+# Create a debugging script
+cat > /app/data/public/debug.js <<EOT
+// Debugging script for Ente
+(function() {
+  console.log("Debug script loaded");
+  
+  // Create debug overlay
+  const debugDiv = document.createElement('div');
+  debugDiv.style.position = 'fixed';
+  debugDiv.style.bottom = '10px';
+  debugDiv.style.right = '10px';
+  debugDiv.style.backgroundColor = 'rgba(0,0,0,0.7)';
+  debugDiv.style.color = 'white';
+  debugDiv.style.padding = '10px';
+  debugDiv.style.borderRadius = '5px';
+  debugDiv.style.zIndex = '9999';
+  debugDiv.style.maxWidth = '400px';
+  debugDiv.style.maxHeight = '200px';
+  debugDiv.style.overflow = 'auto';
+  debugDiv.innerHTML = '<h3>Ente Debug Info</h3>';
+  
+  // Add configuration info
+  const configInfo = document.createElement('div');
+  configInfo.innerHTML = 'ENTE_CONFIG: ' + JSON.stringify(window.ENTE_CONFIG || {}) + '<br>' +
+    'process.env.NEXT_PUBLIC_ENTE_ENDPOINT: ' + (window.process?.env?.NEXT_PUBLIC_ENTE_ENDPOINT || 'undefined') + '<br>' +
+    'localStorage ENTE_CONFIG: ' + localStorage.getItem('ENTE_CONFIG') + '<br>' +
+    'localStorage NEXT_PUBLIC_ENTE_ENDPOINT: ' + localStorage.getItem('NEXT_PUBLIC_ENTE_ENDPOINT');
+  debugDiv.appendChild(configInfo);
+  
+  // Add toggle button
+  const toggleButton = document.createElement('button');
+  toggleButton.innerText = 'Toggle Debug Info';
+  toggleButton.style.marginTop = '10px';
+  toggleButton.onclick = function() {
+    configInfo.style.display = configInfo.style.display === 'none' ? 'block' : 'none';
+  };
+  debugDiv.appendChild(toggleButton);
+  
+  // Add to document when it's ready
+  if (document.body) {
+    document.body.appendChild(debugDiv);
+  } else {
+    window.addEventListener('DOMContentLoaded', function() {
+      document.body.appendChild(debugDiv);
+    });
+  }
+})();
+EOT
+
+# Create debug info HTML page
+cat > /app/data/public/debug.html <<EOT
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Ente Debug Info</title>
+  <style>
+    body { font-family: Arial, sans-serif; margin: 20px; }
+    .debug-section { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; }
+    h1 { color: #333; }
+    pre { background-color: #f5f5f5; padding: 10px; border-radius: 5px; overflow-x: auto; }
+  </style>
+</head>
+<body>
+  <h1>Ente Debug Information</h1>
+  
+  <div class="debug-section">
+    <h2>Frontend Configuration</h2>
+    <pre id="config-info">Loading...</pre>
+  </div>
+  
+  <div class="debug-section">
+    <h2>URL Test</h2>
+    <p>Testing URL construction with API endpoint:</p>
+    <pre id="url-test">Running test...</pre>
+  </div>
+  
+  <div class="debug-section">
+    <h2>API Health Check</h2>
+    <pre id="api-health">Checking API health...</pre>
+  </div>
+  
+  <script>
+    // Define configuration globally
+    window.ENTE_CONFIG = {
+      API_URL: "${API_ENDPOINT}"
+    };
+    
+    // Set environment variables for Next.js apps
+    window.process = window.process || {};
+    window.process.env = window.process.env || {};
+    window.process.env.NEXT_PUBLIC_ENTE_ENDPOINT = "${API_ENDPOINT}";
+    
+    // Store in localStorage
+    localStorage.setItem('ENTE_CONFIG', JSON.stringify(window.ENTE_CONFIG));
+    localStorage.setItem('NEXT_PUBLIC_ENTE_ENDPOINT', "${API_ENDPOINT}");
+    
+    // Display configuration
+    document.getElementById('config-info').textContent = 
+      'window.ENTE_CONFIG = ' + JSON.stringify(window.ENTE_CONFIG, null, 2) + '\n' +
+      'window.process.env.NEXT_PUBLIC_ENTE_ENDPOINT = ' + window.process.env.NEXT_PUBLIC_ENTE_ENDPOINT + '\n' +
+      'localStorage[\'ENTE_CONFIG\'] = ' + localStorage.getItem('ENTE_CONFIG') + '\n' +
+      'localStorage[\'NEXT_PUBLIC_ENTE_ENDPOINT\'] = ' + localStorage.getItem('NEXT_PUBLIC_ENTE_ENDPOINT');
+    
+    // Test URL construction
+    try {
+      const apiUrl = window.ENTE_CONFIG.API_URL;
+      const testUrl = new URL('/users/ott', apiUrl);
+      document.getElementById('url-test').textContent = 
+        'API URL: ' + apiUrl + '\n' +
+        'Test URL (/users/ott): ' + testUrl.toString() + '\n' +
+        'Result: SUCCESS';
+    } catch (e) {
+      document.getElementById('url-test').textContent = 
+        'Error: ' + e.message + '\n' +
+        'Stack: ' + e.stack;
+    }
+    
+    // Test API health
+    fetch('/api/health')
+      .then(response => {
+        if (response.ok) return response.text();
+        throw new Error('API returned status: ' + response.status);
+      })
+      .then(data => {
+        document.getElementById('api-health').textContent = 'API health check: OK\nResponse: ' + data;
+      })
+      .catch(err => {
+        document.getElementById('api-health').textContent = 'API health check failed: ' + err.message;
+      });
+  </script>
+</body>
+</html>
+EOT
+
+# Create a configuration script with properly formatted URL
+cat > /app/data/public/config.js <<EOT
+// Direct configuration for Ente
+window.ENTE_CONFIG = {
+  API_URL: "${API_ENDPOINT}"
+};
+
+// Next.js environment variables
+window.process = window.process || {};
+window.process.env = window.process.env || {};
+window.process.env.NEXT_PUBLIC_ENTE_ENDPOINT = "${API_ENDPOINT}";
+window.process.env.REACT_APP_ENTE_ENDPOINT = "${API_ENDPOINT}";
+window.process.env.VUE_APP_ENTE_ENDPOINT = "${API_ENDPOINT}";
+
+// Create absolute URL helper function to prevent URL construction errors
+window.createApiUrl = function(path) {
+  // Handle paths with or without leading slash
+  if (path && path.startsWith('/')) {
+    return "${API_ENDPOINT}" + path;
+  } else if (path) {
+    return "${API_ENDPOINT}/" + path;
+  }
+  return "${API_ENDPOINT}";
+};
+
+// Store in localStorage for persistence
+try {
+  localStorage.setItem('ENTE_CONFIG', JSON.stringify(window.ENTE_CONFIG));
+  localStorage.setItem('NEXT_PUBLIC_ENTE_ENDPOINT', "${API_ENDPOINT}");
+} catch (e) {
+  console.error("Failed to store config in localStorage:", e);
+}
+
+console.log("Ente config loaded - API_URL:", window.ENTE_CONFIG.API_URL);
+// Override URL constructor to prevent errors
+const originalURL = window.URL;
+window.URL = function(url, base) {
+  try {
+    // Fix common URL construction issues
+    if (url && typeof url === 'string') {
+      // If URL doesn't have a protocol or start with /, add a /
+      if (!url.match(/^[a-z]+:\/\//) && !url.startsWith('/') && !base) {
+        url = '/' + url;
+      }
+    }
+    return new originalURL(url, base);
+  } catch (e) {
+    console.error("URL construction error:", e, "url:", url, "base:", base);
+    // Fallback - return a working URL
+    return new originalURL("${CLOUDRON_APP_ORIGIN}");
+  }
+};
+EOT
+
+# Set up NGINX
+echo "==> Setting up NGINX server"
 
 # Define ports
+NGINX_PORT=3080
 API_PORT=8080
 
 # Check if ports are available
 echo "==> Checking port availability"
+if lsof -i:$NGINX_PORT > /dev/null 2>&1; then
+    echo "==> WARNING: Port $NGINX_PORT is already in use"
+else
+    echo "==> Port $NGINX_PORT is available for NGINX"
+fi
+
 if lsof -i:$API_PORT > /dev/null 2>&1; then
     echo "==> WARNING: Port $API_PORT is already in use"
 else
     echo "==> Port $API_PORT is available for API server"
 fi
 
+# Create necessary NGINX temp directories
+mkdir -p /app/data/nginx/client_body_temp
+mkdir -p /app/data/nginx/proxy_temp
+mkdir -p /app/data/nginx/fastcgi_temp
+mkdir -p /app/data/nginx/uwsgi_temp
+mkdir -p /app/data/nginx/scgi_temp
+mkdir -p /app/data/logs/nginx
+
+# Create the NGINX config
+cat > /app/data/nginx/nginx.conf <<EOT
+worker_processes 1;
+error_log /app/data/logs/nginx/error.log warn;
+pid /app/data/nginx/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+    
+    # Important: Configure temp paths in writable directories
+    client_body_temp_path /app/data/nginx/client_body_temp;
+    proxy_temp_path /app/data/nginx/proxy_temp;
+    fastcgi_temp_path /app/data/nginx/fastcgi_temp;
+    uwsgi_temp_path /app/data/nginx/uwsgi_temp;
+    scgi_temp_path /app/data/nginx/scgi_temp;
+    
+    log_format main '\$remote_addr - \$remote_user [\$time_local] "\$request" '
+                    '\$status \$body_bytes_sent "\$http_referer" '
+                    '"\$http_user_agent" "\$http_x_forwarded_for"';
+    
+    access_log /app/data/logs/nginx/access.log main;
+    
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+    
+    # Security headers
+    map \$sent_http_content_type \$cors_header {
+        default "";
+        "~*text/html" "credentialless";
+    }
+    
+    server {
+        listen $NGINX_PORT default_server;
+        listen [::]:$NGINX_PORT default_server;
+        
+        root /app/web/photos;
+        index index.html;
+        
+        # Security headers
+        add_header Cross-Origin-Embedder-Policy \$cors_header always;
+        add_header Cross-Origin-Opener-Policy "same-origin" always;
+        add_header Cross-Origin-Resource-Policy "cross-origin" always;
+        
+        # Configuration scripts
+        location /config.js {
+            alias /app/data/public/config.js;
+        }
+        
+        location /debug.js {
+            alias /app/data/public/debug.js;
+        }
+        
+        # Debug page
+        location /debug {
+            alias /app/data/public/debug.html;
+        }
+        
+        # Health check endpoints
+        location /health {
+            return 200 "OK";
+        }
+        
+        location /healthcheck {
+            return 200 "OK";
+        }
+        
+        # API health check and API endpoints
+        location /api/ {
+            proxy_pass http://localhost:$API_PORT/;
+            proxy_http_version 1.1;
+            proxy_set_header Connection "";
+            proxy_set_header Host \$host;
+            proxy_set_header X-Real-IP \$remote_addr;
+            proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto \$scheme;
+        }
+        
+        # Root serves the photos app
+        location / {
+            try_files \$uri \$uri/ /index.html;
+            
+            # Insert config script for HTML files
+            sub_filter '</head>' '<script src="/config.js"></script><script src="/debug.js"></script></head>';
+            sub_filter_once on;
+            sub_filter_types text/html;
+        }
+        
+        # Accounts app
+        location /accounts/ {
+            alias /app/web/accounts/;
+            try_files \$uri \$uri/ /accounts/index.html;
+            
+            # Insert config script for HTML files
+            sub_filter '</head>' '<script src="/config.js"></script><script src="/debug.js"></script></head>';
+            sub_filter_once on;
+            sub_filter_types text/html;
+        }
+        
+        # Auth app
+        location /auth/ {
+            alias /app/web/auth/;
+            try_files \$uri \$uri/ /auth/index.html;
+            
+            # Insert config script for HTML files
+            sub_filter '</head>' '<script src="/config.js"></script><script src="/debug.js"></script></head>';
+            sub_filter_once on;
+            sub_filter_types text/html;
+        }
+        
+        # Cast app
+        location /cast/ {
+            alias /app/web/cast/;
+            try_files \$uri \$uri/ /cast/index.html;
+            
+            # Insert config script for HTML files
+            sub_filter '</head>' '<script src="/config.js"></script><script src="/debug.js"></script></head>';
+            sub_filter_once on;
+            sub_filter_types text/html;
+        }
+    }
+}
+EOT
+
+echo "==> Created NGINX config at /app/data/nginx/nginx.conf"
+
+# Start NGINX
+nginx -c /app/data/nginx/nginx.conf -p /app/data/nginx &
+NGINX_PID=$!
+echo "==> NGINX started with PID $NGINX_PID"
+
+# Wait for NGINX to start
+sleep 2
+
+# Test NGINX connectivity
+echo "==> Testing NGINX connectivity"
+for i in {1..5}; do
+    if curl -s --max-time 2 --head --fail http://localhost:$NGINX_PORT/health > /dev/null; then
+        echo "==> NGINX is running properly on port $NGINX_PORT"
+        break
+    else
+        if [ $i -eq 5 ]; then
+            echo "==> Failed to connect to NGINX after multiple attempts"
+            echo "==> Last 20 lines of NGINX error log:"
+            tail -20 /app/data/logs/nginx/error.log || echo "==> No NGINX error log available"
+            echo "==> Network ports in use:"
+            netstat -tuln || echo "==> netstat command not available"
+        else
+            echo "==> Attempt $i: Waiting for NGINX to start... (1 second)"
+            sleep 1
+        fi
+    fi
+done
+
 # Determine available memory and set limits accordingly
 if [[ -f /sys/fs/cgroup/cgroup.controllers ]]; then # cgroup v2
     memory_limit=$(cat /sys/fs/cgroup/memory.max)
@@ -586,10 +962,12 @@ done
 
 echo "==> Application is now running"
 echo "==> Access your Ente instance at: $CLOUDRON_APP_ORIGIN"
+echo "==> To view debug information, visit: $CLOUDRON_APP_ORIGIN/debug"
 
 echo "==> Entering wait state - press Ctrl+C to stop"
 # Wait for all background processes to complete (or for user to interrupt)
 wait $SERVER_PID
+wait $NGINX_PID 
 
 # Create a new go file to inject into the build that overrides the database connection
 mkdir -p "$SERVER_DIR/overrides"