Merge pull request #11 from Annotation-Garden/feature/cloudflare-pages

Migrate to Cloudflare Pages

Author: neuromechanist

.gitignore

@@ -119,6 +119,7 @@ frontend/public/*
 !frontend/public/AGI-square.png
 !frontend/public/favicon.ico
 !frontend/public/image-list.json
+!frontend/public/copy-static-assets.sh
 
 # Image files (but keep README, and downsampled)
 images/original/*.png

frontend/README.md

@@ -17,12 +17,12 @@ npm run dev
 
 Visit http://localhost:3000 to see the dashboard.
 
-## 📦 Deployment
+## Deployment
 
 ### Building for Production
 
 ```bash
-# Build and export static site for GitHub Pages
+# Build and export static site
 npm run build:static
 
 # This will:
@@ -31,23 +31,15 @@ npm run build:static
 # 3. Export as static HTML to out/
 ```
 
-### Manual Deployment to GitHub Pages
+The site is deployed to Cloudflare Pages automatically via GitHub Actions.
 
-```bash
-# Deploy to GitHub Pages (after building)
-npm run deploy
-```
-
-The site will be available at: https://annotation-garden.github.io/image-annotation
-
-## 🛠️ Available Scripts
+## Available Scripts
 
 - `npm run dev` - Start development server
 - `npm run build` - Build for production
-- `npm run build:static` - Build static site for GitHub Pages
+- `npm run build:static` - Build static site with assets
 - `npm run copy-assets` - Copy images and annotations to public folder
 - `npm run clean` - Clean build artifacts and copied assets
-- `npm run deploy` - Deploy to GitHub Pages (requires gh-pages package)
 
 ## 📁 Project Structure
 

frontend/app/page.tsx

@@ -39,15 +39,14 @@ export default function Dashboard() {
   useEffect(() => {
     async function loadImageList() {
       try {
-        const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
-        const response = await fetch(`${basePath}/image-list.json`)
+        const response = await fetch('/image-list.json')
         if (response.ok) {
           const data = await response.json()
           const imageList: ImageData[] = data.images.map((imageName: string) => ({
             id: imageName,
-            thumbnailPath: `${basePath}/thumbnails/${imageName}.jpg`,
-            imagePath: `${basePath}/downsampled/${imageName}.jpg`,
-            annotationPath: `${basePath}/annotations/nsd/${imageName}_annotations.json`
+            thumbnailPath: `/thumbnails/${imageName}.jpg`,
+            imagePath: `/downsampled/${imageName}.jpg`,
+            annotationPath: `/annotations/nsd/${imageName}_annotations.json`
           }))
           setImages(imageList)
         } else {
@@ -109,8 +108,7 @@ export default function Dashboard() {
   async function loadAnnotationsForImage(imageId: string) {
     setImageLoading(true)
     try {
-      const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
-      const response = await fetch(`${basePath}/annotations/nsd/${imageId}_annotations.json`)
+      const response = await fetch(`/annotations/nsd/${imageId}_annotations.json`)
       if (response.ok) {
         const data = await response.json()
         setAnnotations(prev => ({ ...prev, [imageId]: data.annotations || [] }))
@@ -184,7 +182,7 @@ export default function Dashboard() {
             className="flex items-center gap-3 md:gap-4 hover:opacity-90 transition-opacity"
           >
             <img
-              src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/AGI-square.svg`}
+              src="/AGI-square.svg"
               alt="AGI Logo"
               className="w-10 h-10 md:w-12 md:h-12"
             />

frontend/next.config.js

@@ -1,36 +1,12 @@
 /** @type {import('next').NextConfig} */
 
-// Determine if we're building for production GitHub Pages
-const isProd = process.env.NODE_ENV === 'production'
-const basePath = isProd ? '/image-annotation' : ''
-
 const nextConfig = {
   reactStrictMode: true,
   images: {
     domains: ['localhost'],
     unoptimized: true,
   },
-  // GitHub Pages deployment configuration
-  basePath: basePath,
-  assetPrefix: basePath,
   output: 'export',
-  // Pass the base path to the client
-  env: {
-    NEXT_PUBLIC_BASE_PATH: basePath
-  },
-  // Allow serving static files from public directory
-  async rewrites() {
-    return [
-      {
-        source: '/images/:path*',
-        destination: '/images/:path*',
-      },
-      {
-        source: '/annotations/:path*',
-        destination: '/annotations/:path*',
-      },
-    ];
-  },
 }
 
 module.exports = nextConfig

frontend/package.json

@@ -8,9 +8,8 @@
     "start": "next start",
     "lint": "next lint",
     "copy-assets": "bash ./public/copy-static-assets.sh",
-    "build:static": "npm run copy-assets && next build && next export",
-    "clean": "rm -rf .next out public/thumbnails public/downsampled public/annotations",
-    "deploy": "npm run build:static && npx gh-pages -d out"
+    "build:static": "npm run copy-assets && next build",
+    "clean": "rm -rf .next out public/thumbnails public/downsampled public/annotations"
   },
   "dependencies": {
     "next": "^14.2.5",

frontend/public/copy-static-assets.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+# Copy static assets from parent directories to public folder for build
+
+set -e
+
+echo "Copying static assets..."
+
+# Create directories
+mkdir -p public/thumbnails public/downsampled public/annotations/nsd
+
+# Copy thumbnails
+cp -r ../data/thumbnails/* public/thumbnails/ 2>/dev/null || echo "No thumbnails to copy"
+
+# Copy downsampled images
+cp -r ../images/downsampled/* public/downsampled/ 2>/dev/null || echo "No images to copy"
+
+# Copy annotations
+cp -r ../annotations/nsd/*.json public/annotations/nsd/ 2>/dev/null || echo "No annotations to copy"
+
+# Copy image list if it exists
+cp ../data/image-list.json public/ 2>/dev/null || echo "No image-list.json to copy"
+
+echo "Assets copied successfully"
+ls -la public/