fix frontend

Author: yibeichan

.dockerignore

@@ -12,3 +12,5 @@ htmlcov/
 *.pem
 .idea/
 .vscode/
+node_modules
+npm-debug.log*

.env.development

@@ -0,0 +1,17 @@
+# Schema Configuration
+SCHEMA_URL=http://localhost:80/schema/demo-protocol.json
+LOCAL_SCHEMA_DIR=./schemas
+
+# Service Ports
+FRONTEND_PORT=3000
+BACKEND_PORT=8000
+PORT=80
+SSL_PORT=443
+
+# Environment Settings
+NODE_ENV=development
+DEV_MODE=1
+PROJECT_NAME=development
+
+# Nginx Settings
+NGINX_HOST=localhost

.env.example

@@ -1,3 +1,7 @@
+data/
+schemas/
+responses/
+
 *.pyc
 __pycache__
 .env

.gitignore

@@ -1,22 +1,30 @@
-.PHONY: build up down test lint clean help
+.PHONY: build build-verbose up down test lint clean help run stop logs debug
 
 help:
 	@echo "Available commands:"
 	@echo "  make build      - Build Docker images"
+	@echo "  make build-verbose - Build with detailed logs"
 	@echo "  make up         - Start the deployment"
 	@echo "  make down       - Stop the deployment"
 	@echo "  make test       - Run tests"
 	@echo "  make lint       - Run linters"
 	@echo "  make clean      - Clean up Docker resources"
+	@echo "  make run        - Run the container"
+	@echo "  make stop       - Stop the container"
+	@echo "  make logs       - View container logs"
+	@echo "  make debug      - Show config and container state"
 
 build:
 	docker compose build
 
+build-verbose:
+	docker compose build --no-cache --progress=plain 2>&1 | tee build.log
+
 up:
-	docker compose up -d
+	docker compose up --force-recreate --remove-orphans
 
 down:
-	docker compose down
+	docker compose down --remove-orphans
 
 test:
 	docker compose -f docker-compose.dev.yml up -d
@@ -28,5 +36,26 @@ lint:
 	docker compose -f docker-compose.dev.yml exec backend isort .
 
 clean:
-	docker compose down -v
+	docker compose down -v --remove-orphans
 	docker system prune -f
+	docker rm -f reproschema-server
+
+run:
+	docker compose up -d
+
+stop:
+	docker compose down
+
+logs:
+	docker compose logs -f
+
+debug:
+	@echo "=== Config Files ==="
+	@echo "\n=== Bundled JS Files ==="
+	docker compose exec reproschema-server ls -la /usr/share/nginx/html/js/
+	@echo "\n=== Config Values in Bundle ==="
+	docker compose exec reproschema-server grep -A 10 "githubSrc" /usr/share/nginx/html/js/app.*.js
+	@echo "\n=== Environment Variables ==="
+	docker compose exec reproschema-server env | grep -E 'SCHEMA|TOKEN|PORT|BACKEND|ASSETS'
+	@echo "\n=== Nginx Config ==="
+	docker compose exec reproschema-server cat /etc/nginx/conf.d/default.conf | grep -A 5 "location.*${ASSETS_PUBLIC_PATH}"

Makefile

@@ -1 +1,79 @@
-# reproschema-deployment
+# ReproSchema Deployment Container
+
+A containerized solution for deploying ReproSchema UI with data collection capabilities. Simply provide your schema (either from GitHub or local files) and start collecting data.
+
+## Quick Start
+
+1. Create a `.env` file with your configuration:
+```bash
+# Required
+PROJECT_NAME=my_study          # Name for your deployment
+SCHEMA_SOURCE=local           # 'local' or 'github'
+
+# For GitHub schemas
+GITHUB_REPO=user/repo         # Only needed if SCHEMA_SOURCE=github
+GITHUB_TOKEN=ghp_xxx         # Optional: for private repositories
+
+# Optional
+PORT=3000                    # Default: 3000
+```
+
+2. Start the container:
+
+For local schema:
+```bash
+# Place your schema files in ./schemas directory
+mkdir schemas
+cp -r my-schema/* schemas/
+
+# Start the container
+docker compose up -d
+```
+
+For GitHub schema:
+```bash
+# Start with GitHub repository
+SCHEMA_SOURCE=github GITHUB_REPO=user/repo docker compose up -d
+```
+
+3. Access the UI at `http://localhost:3000`
+
+## Data Storage
+
+Participant data is automatically stored in a Docker volume named `${PROJECT_NAME}_data`. To backup or export the data:
+
+```bash
+# Export data
+docker run --rm -v ${PROJECT_NAME}_data:/data -v $(pwd):/backup alpine tar czf /backup/data.tar.gz /data
+```
+
+## Configuration Options
+
+- `SCHEMA_SOURCE`: Source of the schema files
+  - `local`: Use schema files from mounted volume
+  - `github`: Fetch schema from GitHub repository
+- `GITHUB_REPO`: GitHub repository containing schema (format: user/repo)
+- `GITHUB_TOKEN`: GitHub personal access token for private repositories
+- `PORT`: Port to expose the service (default: 3000)
+- `PROJECT_NAME`: Name for the deployment (affects volume names)
+
+## Directory Structure for Local Schema
+
+When using `SCHEMA_SOURCE=local`, organize your schema files as follows:
+
+```
+schemas/
+├── protocol.jsonld
+├── activities/
+│   ├── activity1.jsonld
+│   └── activity2.jsonld
+└── items/
+    ├── item1.jsonld
+    └── item2.jsonld
+```
+
+## Examples
+
+Check the `examples/` directory for sample configurations:
+- `examples/simple-schema`: Basic single-protocol setup
+- `examples/multi-participant`: Setup for multiple participant data collection

README.md

@@ -1,24 +1,94 @@
-# Replace or edit config/nginx/default.conf with:
+map $http_x_forwarded_proto $forwarded_scheme {
+    default $scheme;
+    https https;
+}
+
 server {
     listen 80;
+    listen 443 ssl;
     server_name localhost;
 
-    root /usr/share/nginx/html;
-    index index.html;
+    # SSL and basic config
+    ssl_certificate /etc/nginx/ssl/cert.pem;
+    ssl_certificate_key /etc/nginx/ssl/key.pem;
+    error_log /var/log/nginx/error.log debug;
+    access_log /var/log/nginx/access.log;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header Content-Security-Policy "
+        default-src 'self' https: http://0.0.0.0 http://localhost:*; 
+        script-src 'self' 'unsafe-inline' 'unsafe-eval'; 
+        style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
+        img-src 'self' data: https:; 
+        font-src 'self' data: https://fonts.gstatic.com; 
+        connect-src 'self' https: http://0.0.0.0 http://localhost:* https://raw.githubusercontent.com https://github.com https://api.github.com;
+        worker-src 'self' blob:;
+    " always;
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+
+    # CORS headers
+    add_header 'Access-Control-Allow-Origin' '*' always;
+    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
+    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,Accept' always;
+
+    # Root location for frontend
+    location = / {
+        return 302 $scheme://$http_host${ASSETS_PUBLIC_PATH};
+    }
+
+    # Frontend files
+    location "${ASSETS_PUBLIC_PATH}" {
+        alias /usr/share/nginx/html/;
+        index index.html;
+        try_files $uri $uri/ "${ASSETS_PUBLIC_PATH}index.html";
+
+        # Static assets
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            expires 30d;
+            add_header Cache-Control "public, no-transform";
+            try_files $uri =404;
+        }
 
-    # Handle local schemas
+        # JSON-LD files
+        location ~* \.(jsonld|json)$ {
+            add_header Content-Type application/ld+json;
+            add_header Cache-Control "no-cache";
+            expires 0;
+        }
+    }
+
+    # Backend API
+    location /api/ {
+        proxy_pass http://localhost:8000/;
+        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 $forwarded_scheme;
+    }
+
+    # GitHub raw content proxy
+    location /raw/ {
+        proxy_pass https://raw.githubusercontent.com;
+        proxy_ssl_server_name on;
+        proxy_set_header Host raw.githubusercontent.com;
+        add_header 'Access-Control-Allow-Origin' '*' always;
+    }
+
+    # Local schemas
     location /schemas/ {
-        alias /usr/share/nginx/html/schemas/;
-        try_files $uri $uri/ =404;
-        
-        # Enable CORS
-        add_header 'Access-Control-Allow-Origin' '*';
-        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
-        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
+        alias /schemas/;
+        autoindex on;
+        add_header 'Access-Control-Allow-Origin' '*' always;
     }
 
-    # Handle SPA routing
-    location / {
-        try_files $uri $uri/ /index.html;
+    location /schema/ {
+        proxy_pass https://raw.githubusercontent.com;
+        proxy_ssl_server_name on;
+        proxy_set_header Host raw.githubusercontent.com;
+        add_header 'Access-Control-Allow-Origin' '*' always;
     }
-}
+}