Fix GitHub Actions workflow for Vite React deployment from subfolder

.github/workflows/nextjs.yml → .github/workflows/deploy.yml

@@ -1,14 +1,11 @@
-# Sample workflow for building and deploying a Next.js site to GitHub Pages
-#
-# To get started with Next.js see: https://nextjs.org/docs/getting-started
-#
-name: Deploy Next.js site to Pages
+# Sample workflow for building and deploying a Vite React site to GitHub Pages
+# This workflow handles a monorepo structure with frontend in a subfolder
+name: Deploy Vite React site to Pages
 
 on:
   # Runs on pushes targeting the default branch
   push:
     branches: ["main"]
-
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
@@ -25,69 +22,83 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  # Build job
+  # Build job - compiles the React app using Vite
   build:
     runs-on: ubuntu-latest
     steps:
+      # Download repository code
       - name: Checkout
         uses: actions/checkout@v4
+
+      # Detect package manager with robust lockfile handling
       - name: Detect package manager
         id: detect-package-manager
         run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+          FRONTEND="${{ github.workspace }}/frontend"
+          # Check for yarn.lock first in frontend directory
+          if [ -f "$FRONTEND/yarn.lock" ]; then
             echo "manager=yarn" >> $GITHUB_OUTPUT
             echo "command=install" >> $GITHUB_OUTPUT
             echo "runner=yarn" >> $GITHUB_OUTPUT
+            echo "lockfile_path=frontend/yarn.lock" >> $GITHUB_OUTPUT
             exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
+          # Check for package-lock.json (prefer npm ci when lockfile exists)
+          elif [ -f "$FRONTEND/package-lock.json" ]; then
             echo "manager=npm" >> $GITHUB_OUTPUT
             echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            echo "runner=npm" >> $GITHUB_OUTPUT
+            echo "lockfile_path=frontend/package-lock.json" >> $GITHUB_OUTPUT
+            exit 0
+          # Fallback to npm install when only package.json exists
+          elif [ -f "$FRONTEND/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=npm" >> $GITHUB_OUTPUT
+            echo "lockfile_path=" >> $GITHUB_OUTPUT
             exit 0
           else
-            echo "Unable to determine package manager"
+            # Neither found - fail the build
+            echo "Unable to determine package manager (missing frontend/)"
             exit 1
           fi
+
+      # Setup Node.js environment with built-in caching
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: "20"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
+          cache-dependency-path: ${{ steps.detect-package-manager.outputs.lockfile_path }}
+
+      # Configure GitHub Pages
       - name: Setup Pages
         uses: actions/configure-pages@v5
-        with:
-          # Automatically inject basePath in your Next.js configuration file and disable
-          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
-          #
-          # You may remove this line if you want to manage the configuration yourself.
-          static_site_generator: next
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: |
-            .next/cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+
+      # Install project dependencies using detected package manager
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
-      - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+        working-directory: ./frontend
+
+      # Build the React app using Vite
+      - name: Build with Vite
+        run: ${{ steps.detect-package-manager.outputs.runner }} run build
+        working-directory: ./frontend
+
+      # Upload the built files for deployment
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./out
+          path: ./frontend/dist
 
-  # Deployment job
+  # Deployment job - deploys the built files to GitHub Pages
   deploy:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     needs: build
     steps:
+      # Deploy the uploaded artifact to GitHub Pages
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4