From c1b828c521d3cc250ecfe583b7d98111c799508f Mon Sep 17 00:00:00 2001
From: Marco Pesani <marco@bitrefill.com>
Date: Fri, 12 Jul 2024 09:35:48 +0200
Subject: [PATCH] fix deploy

---
 .github/workflows/deploy.yml | 60 +++++++++++++++++++++++-------------
 vite.config.ts               | 27 +++++++++++++---
 2 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 87f32e6..e0cbb5a 100644
--- a/.github/workflows/deploy.yml
+++ b/.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
\ No newline at end of file
+          # Upload entire repository
+          path: 'build/client'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 54066fb..2ba9f5d 100644
--- a/vite.config.ts
+++ b/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(),
   ],
-});
+});
\ No newline at end of file