Merge branch 'main' into as-ci

Author: alvicsam

README.md

@@ -50,42 +50,83 @@ This command will:
 
 ## Docker Support
 
-### Running Backend with Docker
+### Running with Docker
 
-The backend can be run in a Docker container for easy deployment and consistency across environments.
+Both frontend and backend can be run in Docker containers for easy deployment and consistency across environments.
 
 #### Using Docker Compose (Recommended)
 
 ```bash
-# Build and start the backend
+# Build and start both frontend and backend
 docker-compose up --build
 
 # Run in background
 docker-compose up -d --build
 
-# Stop the service
+# Stop both services
 docker-compose down
+
+# Build and start only backend
+docker-compose up backend --build
+
+# Build and start only frontend
+docker-compose up frontend --build
+```
+
+#### Development Docker Setup
+
+For development with hot reload and backend URL input support:
+
+```bash
+# Start development containers
+./start-dev.sh
+
+# Or use just commands
+just docker-dev      # Start with logs
+just docker-dev-bg   # Start in background
+just docker-dev-down # Stop containers
 ```
 
+**Development Features:**
+- Hot reload for both frontend and backend
+- Backend URL input field enabled
+- Separate ports (Frontend: 3000, Backend: 8080)
+- Source code mounted as volumes
+
 #### Using Docker Commands
 
+**Backend:**
 ```bash
-# Build the image
+# Build the backend image
 docker build -t ah-monitoring-backend ./backend
 
-# Run the container
-docker run -p 3000:3000 -v $(pwd)/backend/data:/app/data ah-monitoring-backend
+# Run the backend container
+docker run -p 8080:8080 -v $(pwd)/backend/data:/app/data ah-monitoring-backend
 
 # Run in background
-docker run -d -p 3000:3000 -v $(pwd)/backend/data:/app/data --name ah-backend ah-monitoring-backend
+docker run -d -p 8080:8080 -v $(pwd)/backend/data:/app/data --name ah-backend ah-monitoring-backend
+```
 
-# Stop the container
-docker stop ah-backend
+**Frontend:**
+```bash
+# Build the frontend image
+docker build -t ah-monitoring-frontend ./frontend
+
+# Run the frontend container
+docker run -p 3000:3000 ah-monitoring-frontend
+
+# Run in background
+docker run -d -p 3000:3000 --name ah-frontend ah-monitoring-frontend
+
+# Stop containers
+docker stop ah-backend ah-frontend
 
-# Remove the container
-docker rm ah-backend
+# Remove containers
+docker rm ah-backend ah-frontend
 ```
 
+> **Note**: For production deployment, you'll need a reverse proxy (like nginx) to route `/` to the frontend container and `/api/*` to the backend container, since the production frontend uses relative URLs.
+
 #### Environment Variables with Docker
 
 You can pass environment variables to the Docker container:
@@ -139,19 +180,20 @@ The application consists of two parts:
 The frontend connects to the backend via Server-Sent Events (SSE) at `/api/updates`. 
 
 **Dynamic Backend URL:**
-- The frontend includes a backend URL input field in the header
+- The frontend includes a backend URL input field in the header (development builds only)
 - Users can connect to any backend instance by entering the URL
 - Supports both local and remote backend instances
 - Shows connection status (connected/disconnected)
 - Defaults to `http://localhost:8080` in development
 
 **Query Parameter Configuration:**
-- You can also set the backend URL via query parameter: `?backend_url=http://your-backend:8080`
+- You can set the backend URL via query parameter: `?backend_url=http://your-backend:8080`
 - Examples:
   - `http://localhost:3000?backend_url=http://192.168.1.100:8080`
   - `http://localhost:3000?backend_url=https://api.yourdomain.com`
 - Query parameter takes precedence over defaults but can still be overridden via the UI input field
 - Useful for direct links to specific backend instances or automated testing
+- Only available in development builds
 
 **Development Setup:**
 - Uses `webpack.dev.js` configuration
@@ -166,16 +208,29 @@ ports:
 
 **Production Setup:**
 - Uses `webpack.prod.js` configuration
-- Frontend uses relative URLs (e.g., `/api/updates`) by default
-- Users can still connect to remote backends via the URL input
+- Frontend uses relative URLs (e.g., `/api/updates`) 
+- Backend URL input field is hidden
 - Build with: `yarn build` or `npm run build`
 
 **Usage:**
-1. Click the backend URL field in the header
+1. Click the backend URL field in the header (development only)
 2. Enter the backend URL (e.g., `localhost:8080`, `api.yourdomain.com`, `192.168.1.100:8080`)
 3. Click "Connect" to establish the connection
 4. The connection status will show green (connected) or red (disconnected)
 
+### Frontend Build Configuration
+
+The frontend uses the `ALLOW_REMOTE_BACKEND` environment variable to control backend URL configuration:
+
+- **Development builds**: `ALLOW_REMOTE_BACKEND=true` (set in `webpack.dev.js`)
+  - Backend URL input field is visible
+  - Query parameter backend URL works
+  
+- **Production builds**: `ALLOW_REMOTE_BACKEND=false` (set in `webpack.prod.js`)
+  - Backend URL input field is hidden
+  - Query parameter backend URL is disabled
+  - Uses relative URLs only
+
 ## Available Commands
 
 - `just install` - Install dependencies for both frontend and backend
@@ -186,3 +241,6 @@ ports:
 - `just clean` - Clean build artifacts
 - `just run` - Setup everything and run in development mode
 - `just run-clean` - Setup everything with clean database and run in development mode
+- `just docker-dev` - Start development Docker containers
+- `just docker-dev-bg` - Start development Docker containers in background
+- `just docker-dev-down` - Stop development Docker containers

deploy.sh

@@ -0,0 +1,35 @@
+version: '3.8'
+
+services:
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    ports:
+      - "127.0.0.1:8080:8080"
+    environment:
+      - NODE_ENV=development
+      - ASSET_HUB_URL=ws://host.docker.internal:63170
+      - RELAY_CHAIN_URL=ws://host.docker.internal:63168
+      - PORT=8080
+      - LOG_LEVEL=debug
+    volumes:
+      - ./backend/data:/app/data
+      - ./backend/src:/app/src  # Mount source for hot reload
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile.dev
+    ports:
+      - "127.0.0.1:3000:3000"
+    environment:
+      - NODE_ENV=development
+      - ALLOW_REMOTE_BACKEND=true
+    volumes:
+      - ./frontend/src:/app/src  # Mount source for hot reload
+      - ./frontend/public:/app/public
+    restart: unless-stopped
+    depends_on:
+      - backend 

docker-compose.dev.yml

@@ -15,4 +15,14 @@ services:
       - LOG_LEVEL=info
     volumes:
       - ./backend/data:/app/data
-    restart: unless-stopped 
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "127.0.0.1:3000:3000"
+    restart: unless-stopped
+    depends_on:
+      - backend 

docker-compose.yml

@@ -0,0 +1,6 @@
+node_modules
+dist
+.git
+*.log
+.DS_Store
+Thumbs.db

frontend/.dockerignore

@@ -0,0 +1,13 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+enableImmutableInstalls: false
+
+enableProgressBars: false
+
+logFilters:
+  - code: YN0013
+    level: discard
+
+nodeLinker: node-modules

frontend/.yarnrc.yml

@@ -0,0 +1,28 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+RUN corepack enable
+
+COPY package.json ./
+COPY yarn.lock ./
+COPY .yarnrc.yml ./
+COPY .yarn ./
+
+# Install dependencies
+RUN yarn --immutable
+
+# Copy source code
+COPY . .
+
+# Build the frontend
+RUN yarn build
+
+# Install a simple static file server
+RUN npm install -g serve
+
+# Expose port 3000
+EXPOSE 3000
+
+# Serve the built files
+CMD ["serve", "-s", "dist", "-l", "3000"]

frontend/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+RUN corepack enable
+
+COPY package.json ./
+COPY yarn.lock ./
+COPY .yarnrc.yml ./
+COPY .yarn ./
+
+# Install dependencies
+RUN yarn --immutable
+
+# Copy webpack configs and other build files
+COPY webpack*.js ./
+COPY tsconfig.json ./
+
+# Expose port 3000
+EXPOSE 3000
+
+# Start development server with hot reload
+CMD ["yarn", "start"] 

frontend/Dockerfile.dev

@@ -36,11 +36,13 @@ function App() {
           <h1>Asset Hub Migration Monitor</h1>
         </div>
         <div className="header-info">
-          <BackendUrlInput
-            currentUrl={backendUrl}
-            onUrlChange={handleBackendUrlChange}
-            isConnected={isConnected}
-          />
+          {process.env.ALLOW_REMOTE_BACKEND === 'true' && (
+            <BackendUrlInput
+              currentUrl={backendUrl}
+              onUrlChange={handleBackendUrlChange}
+              isConnected={isConnected}
+            />
+          )}
           <span className="timestamp">Last updated: {new Date().toLocaleString()}</span>
           <div className="finalized-heads">
             <div className="head-display">

frontend/src/App.tsx

@@ -18,22 +18,23 @@ interface EventSourceProviderProps {
   initialBackendUrl?: string;
 }
 
-// Get initial backend URL - checks query param first, then defaults
+// Get initial backend URL - compile-time security check
 const getInitialBackendUrl = () => {
-  // Check for query parameter first
+  // Compile-time check: if remote backends are disabled, always use relative URLs
+  if (process.env.ALLOW_REMOTE_BACKEND !== 'true') {
+    return '';
+  }
+  
+  // Development mode: check for query parameter first
   const urlParams = new URLSearchParams(window.location.search);
   const backendUrlParam = urlParams.get('backend_url');
 
   if (backendUrlParam) {
     return backendUrlParam;
   }
 
-  // Existing fallback logic
-  if (process.env.NODE_ENV === 'development') {
-    return 'http://localhost:8080';
-  }
-  // In production, use relative URL by default
-  return '';
+  // Development fallback
+  return 'http://localhost:8080';
 };
 
 export const EventSourceProvider: React.FC<EventSourceProviderProps> = ({ 
@@ -147,6 +148,12 @@ export const EventSourceProvider: React.FC<EventSourceProviderProps> = ({
   }, [backendUrl, createEventSource, clearReconnectTimeout]);
 
   const setBackendUrl = useCallback((url: string) => {
+    // Compile-time check: prevent changing backend URL when remote backends are disabled
+    if (process.env.ALLOW_REMOTE_BACKEND !== 'true') {
+      console.warn('Backend URL changes are disabled for security reasons');
+      return;
+    }
+    
     // Clear any pending reconnection attempts when URL changes
     clearReconnectTimeout();
     reconnectAttemptsRef.current = 0;