fix: MIME type with gihtub page

Author: BWJ2310

.github/workflows/deploy.yml

@@ -40,79 +40,39 @@ jobs:
           VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
           # Disable public registration for production
           VITE_ENABLE_PUBLIC_REGISTRATION: 'false'
-          # Set base path for GitHub Pages (root for TradingGoose.github.io)
-          PUBLIC_URL: /
           # Set to production to enable console stripping
           NODE_ENV: production
         run: npm run build
 
       - name: Copy index.html to 404.html for SPA routing
         run: cp ./dist/index.html ./dist/404.html
 
-      - name: Add .nojekyll file
-        run: touch ./dist/.nojekyll
-        
-      - name: Fix GitHub Pages compatibility and create _headers
+      - name: Prepare for GitHub Pages
         run: |
-          cd ./dist
-          
-          # Create proper Netlify-style _headers file for GitHub Pages compatibility
-          cat > _headers << 'EOF'
-          /*
-            X-Frame-Options: DENY
-            X-Content-Type-Options: nosniff
-            Referrer-Policy: strict-origin-when-cross-origin
-          
-          /*.js
-            Content-Type: text/javascript; charset=utf-8
-            Cache-Control: public, max-age=31536000, immutable
-          
-          /*.mjs  
-            Content-Type: text/javascript; charset=utf-8
-            Cache-Control: public, max-age=31536000, immutable
+          # Add .nojekyll to prevent Jekyll processing
+          touch ./dist/.nojekyll
           
-          /assets/*.js
-            Content-Type: text/javascript; charset=utf-8
-            Cache-Control: public, max-age=31536000, immutable
+          # Add CNAME file if using custom domain (comment out if not needed)
+          # echo "yourdomain.com" > ./dist/CNAME
           
-          /*.css
-            Content-Type: text/css; charset=utf-8
-            Cache-Control: public, max-age=31536000, immutable
+          # Verify the build output
+          echo "=== Build Output Structure ==="
+          ls -la ./dist/
           
-          /assets/*.css
-            Content-Type: text/css; charset=utf-8
-            Cache-Control: public, max-age=31536000, immutable
-          
-          /favicon.ico
-            Content-Type: image/x-icon
-            Cache-Control: public, max-age=86400
-          EOF
-          
-          # Verify files exist
-          echo "=== Checking build output ==="
-          ls -la ./
-          echo ""
-          echo "=== Assets directory ==="
-          ls -la assets/ || echo "No assets directory found"
           echo ""
+          echo "=== JavaScript Files ==="
+          find ./dist -name "*.js" -type f | head -10
           
-          # Find all JavaScript files
-          find . -name "*.js" -type f | while read file; do
-            echo "✓ Found JS file: $file ($(file -b --mime-type "$file"))"
-          done
-          
-          # Verify favicon
-          if [ ! -f "favicon.ico" ]; then
-            echo "ERROR: favicon.ico not found"
-            exit 1
+          echo ""
+          echo "=== Checking index.html ==="
+          if [ -f "./dist/index.html" ]; then
+            echo "✓ index.html found"
+            # Show script tags to debug MIME type issues
+            grep -E '<script|<link' ./dist/index.html | head -5
           else
-            echo "✓ favicon.ico found ($(file -b --mime-type favicon.ico))"
+            echo "ERROR: index.html not found!"
+            exit 1
           fi
-          
-          # Check HTML references
-          echo ""
-          echo "=== Module script references in HTML ==="
-          grep 'type="module"' index.html || echo "No module scripts found"
         
       - name: Setup Pages
         uses: actions/configure-pages@v4

vite.config.ts

@@ -36,24 +36,22 @@ export default defineConfig(({ mode }) => ({
     target: 'es2015',
     modulePreload: {
       polyfill: true,
-      resolveDependencies: (_, deps) => deps
     },
     rollupOptions: {
       output: {
         // Ensure JS files have proper extensions and format for GitHub Pages
         format: 'es',
-        entryFileNames: 'assets/main.[hash].js',
-        chunkFileNames: 'assets/chunk.[hash].js',
+        entryFileNames: '[name]-[hash].js',
+        chunkFileNames: 'chunks/[name]-[hash].js',
         assetFileNames: (assetInfo) => {
-          // Use simple, clear naming for GitHub Pages compatibility
-          const fileName = assetInfo.names?.[0] || 'asset';
-          if (fileName.endsWith('.css')) {
-            return 'assets/styles.[hash].css';
+          const info = assetInfo.names?.[0] || '';
+          if (/\.(css)$/.test(info)) {
+            return 'css/[name]-[hash][extname]';
           }
-          if (fileName.endsWith('.png') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.gif') || fileName.endsWith('.svg')) {
-            return 'assets/images/[name].[hash][extname]';
+          if (/\.(png|jpg|jpeg|gif|svg|ico|webp)$/.test(info)) {
+            return 'images/[name]-[hash][extname]';
           }
-          return 'assets/[name].[hash][extname]';
+          return 'assets/[name]-[hash][extname]';
         },
         manualChunks: undefined
       }