updating frontend deployment to cloudflare workers

Author: HackStrix

.github/workflows/deploy.yml

@@ -54,7 +54,7 @@ jobs:
           echo "✅ No frontend changes detected"
         fi
 
-  build-and-push:
+  build-and-push-backend:
     name: Build and Push Backend
     runs-on: [self-hosted, home]
     needs: check-changes
@@ -99,70 +99,53 @@ jobs:
         cache-to: type=gha,mode=max
         platforms: linux/amd64,linux/arm64
 
-  build-frontend-image:
-    name: Build Frontend Container
-    runs-on: [self-hosted, home]
+  deploy-frontend-cloudflare:
+    name: Deploy Frontend to Cloudflare Workers
+    runs-on: ubuntu-latest
     needs: check-changes
     if: needs.check-changes.outputs.frontend-changed == 'true'
-    permissions:
-      contents: read
-      packages: write
-      
+    
+    defaults:
+      run:
+        working-directory: ./frontend
+        
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
 
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v3
-
-    - name: Log in to Container Registry
-      uses: docker/login-action@v3
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
       with:
-        registry: ${{ env.REGISTRY }}
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
+        node-version: '24'
+        cache: 'npm'
+        cache-dependency-path: './frontend/package-lock.json'
 
-    - name: Extract metadata for frontend
-      id: meta
-      uses: docker/metadata-action@v5
-      with:
-        images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}-frontend
-        tags: |
-          type=ref,event=branch
-          type=sha,prefix={{branch}}-
-          type=raw,value=latest,enable={{is_default_branch}}
+    - name: Install dependencies
+      run: npm ci
 
-    - name: Build and push Frontend Docker image
-      uses: docker/build-push-action@v5
-      with:
-        context: ./frontend
-        file: ./frontend/Dockerfile
-        push: true
-        tags: ${{ steps.meta.outputs.tags }}
-        labels: ${{ steps.meta.outputs.labels }}
-        cache-from: type=gha
-        cache-to: type=gha,mode=max
-        platforms: linux/amd64,linux/arm64
+    - name: Install Wrangler
+      run: npm install -g wrangler
 
-  deploy-via-portainer:
-    name: Deploy via Portainer
+    - name: Build for Cloudflare Workers
+      run: npm run build:cloudflare
+      env:
+        NEXT_PUBLIC_API_URL: ${{ secrets.BACKEND_API_URL }}
+
+    - name: Deploy to Cloudflare Workers
+      run: wrangler deploy
+      env:
+        CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+        CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+
+  deploy-backend-portainer:
+    name: Deploy Backend via Portainer
     runs-on: [self-hosted, home]
-    needs: [check-changes, build-and-push, build-frontend-image]
+    needs: [check-changes, build-and-push-backend]
     if: always() && github.ref == 'refs/heads/main' && 
-        (needs.build-and-push.result == 'success' || needs.build-and-push.result == 'skipped') &&
-        (needs.build-frontend-image.result == 'success' || needs.build-frontend-image.result == 'skipped') &&
-        (needs.check-changes.outputs.backend-changed == 'true' || needs.check-changes.outputs.frontend-changed == 'true')
+        needs.check-changes.outputs.backend-changed == 'true' &&
+        (needs.build-and-push-backend.result == 'success' || needs.build-and-push-backend.result == 'skipped')
 
     steps:
-    - name: Deployment Info
-      run: |
-        echo "📋 **Deployment Information**" >> $GITHUB_STEP_SUMMARY
-        echo "" >> $GITHUB_STEP_SUMMARY
-        echo "- **Backend Changed**: ${{ needs.check-changes.outputs.backend-changed }}" >> $GITHUB_STEP_SUMMARY
-        echo "- **Frontend Changed**: ${{ needs.check-changes.outputs.frontend-changed }}" >> $GITHUB_STEP_SUMMARY
-        echo "- **Backend Build**: ${{ needs.build-and-push.result }}" >> $GITHUB_STEP_SUMMARY
-        echo "- **Frontend Build**: ${{ needs.build-frontend-image.result }}" >> $GITHUB_STEP_SUMMARY
-
     - name: Verify Portainer Connection
       run: |
         echo "🔍 Verifying connection to Portainer..."
@@ -173,18 +156,11 @@ jobs:
           exit 1
         fi
 
-    - name: Trigger Portainer Stack Redeployment
+    - name: Trigger Portainer Stack Redeployment  
       env:
         PORTAINER_WEBHOOK_URL: ${{ secrets.PORTAINER_WEBHOOK_URL }}
-        BACKEND_CHANGED: ${{ needs.check-changes.outputs.backend-changed }}
-        FRONTEND_CHANGED: ${{ needs.check-changes.outputs.frontend-changed }}
       run: |
-        echo "🚀 Starting deployment process..."
-        echo "📋 Backend changed: $BACKEND_CHANGED"
-        echo "📋 Frontend changed: $FRONTEND_CHANGED"
-        
-        # Trigger redeployment via webhook
-        echo "🔄 Triggering stack redeployment via webhook..."
+        echo "🚀 Starting backend deployment..."
         
         RESPONSE=$(curl -s -w "%{http_code}" -X POST \
           -H "Content-Type: application/json" \
@@ -196,52 +172,52 @@ jobs:
         
         case $HTTP_CODE in
           200|204)
-            echo "✅ Stack redeployment triggered successfully!"
-            [ -n "$RESPONSE_BODY" ] && echo "📝 Response: $RESPONSE_BODY"
+            echo "✅ Backend redeployment triggered successfully!"
             ;;
           *)
-            echo "❌ Deployment webhook failed with HTTP $HTTP_CODE"
+            echo "❌ Backend deployment failed with HTTP $HTTP_CODE"
             echo "📝 Response: $RESPONSE_BODY"
-            echo "🔗 Check Portainer for more details"
             exit 1
             ;;
         esac
-        
-        echo "⏳ Deployment initiated via webhook - check Portainer for progress"
-        echo "🔗 Monitor at: https://portainer.sankalpnarula.com"
 
-    - name: Deployment Summary
-      if: always()
+  deployment-summary:
+    name: Deployment Summary
+    runs-on: ubuntu-latest
+    needs: [check-changes, deploy-frontend-cloudflare, deploy-backend-portainer]
+    if: always() && github.ref == 'refs/heads/main'
+    
+    steps:
+    - name: Create Summary
       run: |
-        echo "🎯 **Portainer Deployment Summary**" >> $GITHUB_STEP_SUMMARY
+        echo "# 🚀 Deployment Summary" >> $GITHUB_STEP_SUMMARY
         echo "" >> $GITHUB_STEP_SUMMARY
-        if [ "${{ job.status }}" = "success" ]; then
-          echo "✅ **Status**: Deployment successful" >> $GITHUB_STEP_SUMMARY
-          echo "🔗 **Portainer**: [View Stack](https://portainer.sankalpnarula.com)" >> $GITHUB_STEP_SUMMARY
-          if [ "${{ needs.check-changes.outputs.backend-changed }}" = "true" ]; then
-            echo "📦 **Backend Image**: \`ghcr.io/${{ github.repository }}:latest\` (updated)" >> $GITHUB_STEP_SUMMARY
-          else
-            echo "📦 **Backend Image**: \`ghcr.io/${{ github.repository }}:latest\` (unchanged)" >> $GITHUB_STEP_SUMMARY
-          fi
-          if [ "${{ needs.check-changes.outputs.frontend-changed }}" = "true" ]; then
-            echo "📦 **Frontend Image**: \`ghcr.io/${{ github.repository }}-frontend:latest\` (updated)" >> $GITHUB_STEP_SUMMARY
-          else
-            echo "📦 **Frontend Image**: \`ghcr.io/${{ github.repository }}-frontend:latest\` (unchanged)" >> $GITHUB_STEP_SUMMARY
-          fi
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "**What was deployed:**" >> $GITHUB_STEP_SUMMARY
-          if [ "${{ needs.check-changes.outputs.backend-changed }}" = "true" ]; then
-            echo "- ✅ Backend: Built and deployed new image" >> $GITHUB_STEP_SUMMARY
-          else
-            echo "- ⏭️ Backend: No changes, using existing image" >> $GITHUB_STEP_SUMMARY
-          fi
-          if [ "${{ needs.check-changes.outputs.frontend-changed }}" = "true" ]; then
-            echo "- ✅ Frontend: Built and deployed new image" >> $GITHUB_STEP_SUMMARY
-          else
-            echo "- ⏭️ Frontend: No changes, using existing image" >> $GITHUB_STEP_SUMMARY
-          fi
+        
+        # Frontend status
+        if [ "${{ needs.deploy-frontend-cloudflare.result }}" = "success" ]; then
+          echo "## ✅ Frontend (Cloudflare Workers)" >> $GITHUB_STEP_SUMMARY
+          echo "- Status: **Deployed successfully**" >> $GITHUB_STEP_SUMMARY
+          echo "- Platform: Cloudflare Workers" >> $GITHUB_STEP_SUMMARY
+          echo "- Domain: https://ocpp.sankalpnarula.com" >> $GITHUB_STEP_SUMMARY
+        elif [ "${{ needs.check-changes.outputs.frontend-changed }}" = "true" ]; then
+          echo "## ❌ Frontend (Cloudflare Workers)" >> $GITHUB_STEP_SUMMARY
+          echo "- Status: **Deployment failed**" >> $GITHUB_STEP_SUMMARY
+        else
+          echo "## ⏭️ Frontend (Cloudflare Workers)" >> $GITHUB_STEP_SUMMARY
+          echo "- Status: **No changes, skipped**" >> $GITHUB_STEP_SUMMARY
+        fi
+        
+        echo "" >> $GITHUB_STEP_SUMMARY
+        
+        # Backend status  
+        if [ "${{ needs.deploy-backend-portainer.result }}" = "success" ]; then
+          echo "## ✅ Backend (Portainer)" >> $GITHUB_STEP_SUMMARY
+          echo "- Status: **Deployed successfully**" >> $GITHUB_STEP_SUMMARY
+          echo "- Platform: Portainer + Docker" >> $GITHUB_STEP_SUMMARY
+        elif [ "${{ needs.check-changes.outputs.backend-changed }}" = "true" ]; then
+          echo "## ❌ Backend (Portainer)" >> $GITHUB_STEP_SUMMARY
+          echo "- Status: **Deployment failed**" >> $GITHUB_STEP_SUMMARY
         else
-          echo "❌ **Status**: Deployment failed" >> $GITHUB_STEP_SUMMARY
-          echo "🔍 **Check**: Review job logs for details" >> $GITHUB_STEP_SUMMARY
-          echo "🔗 **Portainer**: [Check Stack Status](https://portainer.sankalpnarula.com)" >> $GITHUB_STEP_SUMMARY
+          echo "## ⏭️ Backend (Portainer)" >> $GITHUB_STEP_SUMMARY
+          echo "- Status: **No changes, skipped**" >> $GITHUB_STEP_SUMMARY
         fi

frontend/next.config.js

@@ -2,25 +2,30 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  output: 'standalone',
-  assetPrefix: '',
-  // Configure API proxy for development
-  async rewrites() {
-    return [
-      {
-        source: '/health',
-        destination: 'http://localhost:8080/health', // Health check endpoint
-      },
-      {
-        source: '/api/:path*',
-        destination: 'http://localhost:8080/api/:path*', // Go backend
-      },
-      {
-        source: '/ws',
-        destination: 'http://localhost:8080/ws', // WebSocket endpoint
-      },
-    ];
+  output: 'export', // Static export for Cloudflare Workers
+  trailingSlash: true,
+  images: {
+    unoptimized: true // Required for static export
   },
+  // Configure API proxy only for development (rewrites don't work with export)
+  ...(process.env.NODE_ENV === 'development' && {
+    async rewrites() {
+      return [
+        {
+          source: '/health',
+          destination: 'http://localhost:8080/health', // Health check endpoint
+        },
+        {
+          source: '/api/:path*',
+          destination: 'http://localhost:8080/api/:path*', // Go backend
+        },
+        {
+          source: '/ws',
+          destination: 'http://localhost:8080/ws', // WebSocket endpoint
+        },
+      ];
+    },
+  }),
 };
 
 module.exports = nextConfig;