Fix GitHub Actions build error by using main-github-pages.tsx and updating dependencies #13
Workflow file for this run
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Deploy to GitHub Pages | |
| on: | |
| # Runs on pushes to any branch to validate build | |
| push: | |
| # Runs on pull requests to validate build | |
| pull_request: | |
| # Allows you to run this workflow manually from the Actions tab | |
| workflow_dispatch: | |
| # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages | |
| permissions: | |
| contents: read | |
| pages: write | |
| id-token: write | |
| # Allow only one concurrent deployment | |
| concurrency: | |
| group: "pages" | |
| cancel-in-progress: true | |
| jobs: | |
| # Build job | |
| build: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v4 | |
| - name: Setup Node | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: "18" | |
| cache: 'npm' | |
| - name: Create simplified vite config | |
| run: | | |
| cat > vite.config.js << 'EOF' | |
| import { defineConfig } from "vite"; | |
| import react from "@vitejs/plugin-react"; | |
| import tailwindcss from "@tailwindcss/vite"; | |
| import { resolve } from 'path'; | |
| // https://vitejs.dev/config/ | |
| export default defineConfig({ | |
| plugins: [react(), tailwindcss()], | |
| build: { | |
| base: "/github-copilot-usage/", | |
| outDir: 'dist' | |
| }, | |
| resolve: { | |
| alias: { | |
| '@': resolve(__dirname, 'src') | |
| } | |
| } | |
| }); | |
| EOF | |
| - name: Create simplified package.json | |
| run: | | |
| cat > simplified-package.json << 'EOF' | |
| { | |
| "name": "github-copilot-usage-analyzer", | |
| "private": true, | |
| "version": "1.0.0", | |
| "type": "module", | |
| "scripts": { | |
| "build": "vite build", | |
| "preview": "vite preview" | |
| }, | |
| "dependencies": { | |
| "@heroicons/react": "^2.2.0", | |
| "@phosphor-icons/react": "^2.1.7", | |
| "@radix-ui/colors": "^3.0.0", | |
| "@radix-ui/react-accordion": "^1.2.3", | |
| "@radix-ui/react-alert-dialog": "^1.1.6", | |
| "@radix-ui/react-aspect-ratio": "^1.1.2", | |
| "@radix-ui/react-avatar": "^1.1.3", | |
| "@radix-ui/react-checkbox": "^1.1.4", | |
| "@radix-ui/react-collapsible": "^1.1.3", | |
| "@radix-ui/react-context-menu": "^2.2.6", | |
| "@radix-ui/react-dialog": "^1.1.6", | |
| "@radix-ui/react-dropdown-menu": "^2.1.6", | |
| "@radix-ui/react-hover-card": "^1.1.6", | |
| "@radix-ui/react-label": "^2.1.2", | |
| "@radix-ui/react-menubar": "^1.1.6", | |
| "@radix-ui/react-navigation-menu": "^1.2.5", | |
| "@radix-ui/react-popover": "^1.1.6", | |
| "@radix-ui/react-progress": "^1.1.2", | |
| "@radix-ui/react-radio-group": "^1.2.3", | |
| "@radix-ui/react-scroll-area": "^1.2.9", | |
| "@radix-ui/react-select": "^2.1.6", | |
| "@radix-ui/react-separator": "^1.1.2", | |
| "@radix-ui/react-slider": "^1.2.3", | |
| "@radix-ui/react-slot": "^1.1.2", | |
| "@radix-ui/react-switch": "^1.1.3", | |
| "@radix-ui/react-tabs": "^1.1.3", | |
| "@radix-ui/react-toggle": "^1.1.2", | |
| "@radix-ui/react-toggle-group": "^1.1.2", | |
| "@radix-ui/react-tooltip": "^1.1.8", | |
| "class-variance-authority": "^0.7.1", | |
| "clsx": "^2.1.1", | |
| "cmdk": "^1.1.1", | |
| "d3": "^7.9.0", | |
| "date-fns": "^3.6.0", | |
| "embla-carousel-react": "^8.5.2", | |
| "framer-motion": "^12.6.2", | |
| "input-otp": "^1.4.2", | |
| "lucide-react": "^0.484.0", | |
| "marked": "^15.0.7", | |
| "react": "^19.0.0", | |
| "react-day-picker": "^9.6.7", | |
| "react-dom": "^19.0.0", | |
| "react-hook-form": "^7.54.2", | |
| "react-resizable-panels": "^2.1.7", | |
| "recharts": "^2.15.1", | |
| "sonner": "^2.0.1", | |
| "tailwind-merge": "^3.0.2", | |
| "three": "^0.175.0", | |
| "tw-animate-css": "^1.2.4", | |
| "uuid": "^11.1.0", | |
| "vaul": "^1.1.2", | |
| "zod": "^3.24.2" | |
| }, | |
| "devDependencies": { | |
| "@tailwindcss/vite": "^4.0.17", | |
| "@types/react": "^19.0.10", | |
| "@types/react-dom": "^19.0.4", | |
| "@vitejs/plugin-react": "^4.3.4", | |
| "tailwindcss": "^4.0.17", | |
| "typescript": "~5.7.2", | |
| "vite": "^6.3.5" | |
| } | |
| } | |
| EOF | |
| mv simplified-package.json package.json | |
| - name: Install dependencies | |
| run: npm install | |
| - name: Create modified App with no Spark dependencies | |
| run: | | |
| # Create a file to replace @github/spark imports | |
| mkdir -p src/spark-shims | |
| cat > src/spark-shims/hooks.js << 'EOF' | |
| import { useState } from 'react'; | |
| // Simple localStorage-based shim for useKV hook | |
| export function useKV(key, initialValue) { | |
| const storageKey = `kv-${key}`; | |
| // Get from localStorage | |
| const stored = localStorage.getItem(storageKey); | |
| const initial = stored !== null ? JSON.parse(stored) : initialValue; | |
| const [value, setValue] = useState(initial); | |
| const setValueAndStore = (newValue) => { | |
| const valueToStore = newValue instanceof Function ? newValue(value) : newValue; | |
| setValue(valueToStore); | |
| localStorage.setItem(storageKey, JSON.stringify(valueToStore)); | |
| }; | |
| const deleteValue = () => { | |
| setValue(null); | |
| localStorage.removeItem(storageKey); | |
| }; | |
| return [value, setValueAndStore, deleteValue]; | |
| } | |
| EOF | |
| - name: Update imports in code | |
| run: | | |
| # Replace imports from @github/spark/hooks with our shim | |
| find src -type f -name "*.ts" -o -name "*.tsx" | xargs sed -i 's/import {.*} from "@github\/spark\/hooks"/import { useKV } from "..\/spark-shims\/hooks"/g' | |
| - name: Use GitHub Pages main file | |
| run: | | |
| # Use the main-github-pages.tsx instead of main.tsx to avoid Spark imports | |
| cp src/main-github-pages.tsx src/main.tsx | |
| - name: Setup Pages | |
| uses: actions/configure-pages@v4 | |
| - name: Build | |
| run: npm run build | |
| - name: Upload artifact | |
| uses: actions/upload-pages-artifact@v3 | |
| with: | |
| path: './dist' | |
| # Deployment job | |
| deploy: | |
| # Only deploy on main branch | |
| if: github.ref == 'refs/heads/main' | |
| environment: | |
| name: github-pages | |
| url: ${{ steps.deployment.outputs.page_url }} | |
| runs-on: ubuntu-latest | |
| needs: build | |
| steps: | |
| - name: Deploy to GitHub Pages | |
| id: deployment | |
| uses: actions/deploy-pages@v4 |