fix deploy

Author: marcopesani

.github/workflows/deploy.yml

@@ -1,31 +1,47 @@
-name: Deploy to GitHub Pages
+name: Build and deploy
 
 on:
+  # Runs on pushes targeting the default branch
   push:
-    branches:
-      - main  # Set this to your default branch
+    branches: ["main"]
 
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write  # This is required for the deployment to work
-    steps:
-      - uses: actions/checkout@v3
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
 
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: '20'  # Use the Node.js version specified in your package.json
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
 
-      - name: Install dependencies
-        run: npm ci
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
 
-      - name: Build
-        run: npm run build
 
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+jobs:
+  # Single deploy job since we're just deploying
+  build-and-deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
+        run: |
+          npm ci
+          npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build/client  # Adjust this to your build output directory
+          # Upload entire repository
+          path: 'build/client'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

vite.config.ts

@@ -1,16 +1,33 @@
 import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { copyFileSync } from "node:fs";
+import { join } from "node:path";
 
 export default defineConfig({
+  base: "/remix-gh-pages/",
   plugins: [
     remix({
-      future: {
-        v3_fetcherPersist: true,
-        v3_relativeSplatPath: true,
-        v3_throwAbortReason: true,
+      ssr: false,
+      basename: "/remix-gh-pages/",
+      buildEnd(args) {
+        if (!args.viteConfig.isProduction) return;
+
+        // When deploying to GitHub Pages, if you navigate from / to another
+        // route and refresh the tab, it will show the default GH Pages 404
+        // page. This happens because GH Pages is not configured to send all
+        // traffic to the index.html where we can load our client-side JS.
+        // To fix this, we can create a 404.html file that contains the same
+        // content as index.html. This way, when the user refreshes the page,
+        // GH Pages will serve our 404.html and everything will work as
+        //expected.
+        const buildPath = args.viteConfig.build.outDir;
+        copyFileSync(
+          join(buildPath, "index.html"),
+          join(buildPath, "404.html"),
+        );
       },
     }),
     tsconfigPaths(),
   ],
-});
+});