added 404.html file after build step to handle gh-pages routing issue…

main.yml

@@ -9,8 +9,7 @@ permissions:
 jobs:
    build-and-deploy:
      runs-on: ubuntu-latest
-     env:
-       VITE_BASE_URL: /solid-cockpit/
+
      steps:
        - name: Checkout 🛎️
          uses: actions/checkout@v3
@@ -20,12 +19,15 @@ jobs:
          with:
            node-version: 20.x
            cache: npm
+
        - name: Install and Build 🔧
          run: |
            yarn i
-           yarn run build
-           cd dist
-           cp index.html 404.html
+           yarn run build --base=/solid-cockpit/
+
+       - name: Add 404 fallback
+         run: cp dist/index.html dist/404.html
+
        - name: Deploy 🚀
          uses: JamesIves/github-pages-deploy-action@releases/v4
          with:

package.json

@@ -7,6 +7,7 @@
   "repository": "https://github.com/KNowledgeOnWebScale/solid-cockpit/tree/EDC_active",
   "author": "Elias Crum",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/router.ts

@@ -15,7 +15,7 @@ import { useAuthStore } from "./stores/auth";
  * The router here allows for navigation between different functional pages of the TRIPLE App
  */
 const router = createRouter({
-  history: createWebHistory('/solid-cockpit/'),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       name: "Home",

vite.config.js

@@ -1,25 +1,27 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { fileURLToPath, URL } from 'node:url'
-
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { fileURLToPath, URL } from "node:url";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  },
-  base: process.env.VITE_BASE_URL || './',
-  transpileDependencies: true,
-  build: {
-    outDir: 'dist',
-  },
-  server: {
-    headers: {
-      'Cross-Origin-Opener-Policy': 'same-origin',
-      'Cross-Origin-Embedder-Policy': 'require-corp',
+export default defineConfig(({ command }) => {
+  const isDev = command === "serve";
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
+      },
+    },
+    base: isDev ? "./" : "/solid-cockpit/",
+    transpileDependencies: true,
+    build: {
+      outDir: "dist",
+    },
+    server: {
+      headers: {
+        "Cross-Origin-Opener-Policy": "same-origin",
+        "Cross-Origin-Embedder-Policy": "require-corp",
+      },
     },
-  },
-})
+  };
+});