Fix gh-pages base route

.env.gh-pages

@@ -0,0 +1 @@
+VITE_GH_PAGES_BUILD=true

.github/workflows/deploy-demo-to-gh-pages.yml

@@ -19,7 +19,7 @@ jobs:
         run: npm ci
 
       - name: Build
-        run: npm run build-mock
+        run: npm run build:gh-pages
 
       - name: Deploy
         if: ${{ github.event_name != 'pull_request' }}

package.json

@@ -43,7 +43,7 @@
     "start": "vite",
     "start-mock": "vite --mode mock",
     "build": "vite build",
-    "build-mock": "vite build --mode mock",
+    "build:gh-pages": "vite build --mode gh-pages",
     "build-and-zip": "vite build && ./script/zip-dist.sh",
     "init-mock": "npx msw init public --no-save",
     "prettier": "npx prettier --write \"src/**/*.{ts,tsx}\"",

src/index.tsx

@@ -8,7 +8,7 @@ import "./i18n/i18n";
 import "./index.css";
 
 console.log("Running in:", import.meta.env.MODE);
-if (import.meta.env.MODE === "mock") {
+if (import.meta.env.MODE === "mock" || import.meta.env.MODE === "gh-pages") {
   worker.start();
 }
 

vite.config.js

@@ -1,32 +1,40 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 const path = require("path");
 
-export default defineConfig({
-  server: {
-    proxy: {
-      "/api/v1": {
-        target: "http://localhost:8080/api/v1",
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api\/v1/, ""),
+const viteConfig = ({ mode }) => {
+  const isGhPagesBuild =
+    loadEnv(mode, process.cwd()).VITE_GH_PAGES_BUILD === "true";
+
+  return defineConfig({
+    server: {
+      proxy: {
+        "/api/v1": {
+          target: "http://localhost:8080/api/v1",
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api\/v1/, ""),
+        },
       },
     },
-  },
-  build: {
-    // https://stackoverflow.com/questions/76694615/module-level-directives-cause-errors-when-bundled-use-client-was-ignored-caus
-    rollupOptions: {
-      onwarn(warning, warn) {
-        if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
-          return;
-        }
-        warn(warning);
+    base: isGhPagesBuild ? "/oj-lab-front/" : "/",
+    build: {
+      // https://stackoverflow.com/questions/76694615/module-level-directives-cause-errors-when-bundled-use-client-was-ignored-caus
+      rollupOptions: {
+        onwarn(warning, warn) {
+          if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
+            return;
+          }
+          warn(warning);
+        },
       },
     },
-  },
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
+    plugins: [react()],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
     },
-  },
-});
+  });
+};
+
+export default viteConfig;