crdc-demo/HANDOFF.md

Handoff: Fix CORS for CRDC Arrests API Demo App

Current Status

The demo app at https://pages.civilytics.org/crdc-demo/ loads HTML correctly but shows a blank white screen because browser-based fetch requests to the CRDC API are blocked by CORS (the API doesn't send Access-Control-Allow-Origin headers).

What's Done

1. ✅ App code: React + Vite app fully built with 6 charts, Civilytics visual identity, loading animation, district search — all committed and building cleanly
2. ✅ Git Pages deployment: Gitea Actions workflow (.gitea/workflows/pages.yml) successfully builds dist/ and deploys to a pages branch on Civilytics/crdc-demo repo at gitea.civilytics.org
3. ✅ CORS proxy code added:
   • Updated src/hooks/useApi.js, LoadingAnimation.jsx, ChartPanel.jsx with VITE_PROXY_URL support (routes through a query-param-based proxy)
   • Added proxy.php — simple PHP CORS proxy for git-pages hosts that support PHP
   • Updated Dockerfile nginx.conf to include /api/v1/ reverse proxy with CORS headers

What Needs to Be Done Next

Option A: Fix at the API source (recommended, cleanest)

The CRDC API is a Plumber/R service deployed behind Cloudflare. The code change has already been made in crdc-arrests/api/plumber.R — added CORS headers (Access-Control-Allow-Origin: *) to the existing cacheHeaders filter and OPTIONS preflight handling.

Action needed: Deploy this updated plumber.R to the running API server so it takes effect at https://crdc-api.civilytics.org/. The change is in /home/jared/Nextcloud/Civilytics/Code/Civilytics/crdc-arrests/api/plumber.R (lines 56-78).

Option B: Fix on the git-pages server

If you can't restart the API, configure the nginx serving pages.civilytics.org to add CORS headers when proxying requests to crdc-api.civilytics.org. Or deploy proxy.php and set VITE_PROXY_URL=/crdc-demo/proxy.php at build time.

Key Files

• API fix: /home/jared/Nextcloud/Civilytics/Code/Civilytics/crdc-arrests/api/plumber.R (CORS headers added to cacheHeaders filter)
• App code: /home/jared/Nextcloud/Civilytics/Code/Civilytics/crdc-demo/src/ — fully built, deployed to pages branch
• Proxy fallback: proxy.php, nginx.conf with reverse proxy config

Verification Steps After Fix

1. Visit https://pages.civilytics.org/crdc-demo/
2. Select a state → search for "Denver" → should see district results
3. Click a district → loading animation runs, then 6 charts appear
4. Check browser dev tools → no CORS errors in console

Git Status

• crdc-arrests repo: plumber.R modified (CORS headers added), not yet committed/pushed to API deployment
• crdc-demo repo: All fixes pushed and deployed via Gitea Actions, awaiting CORS resolution at API or server level