Enable nginx to forward all unknown routes to Vue

#4

.gitignore

@@ -18,7 +18,7 @@ coverage
 /cypress/screenshots/
 
 # Editor directories and files
-ProxyAPI-UI/.vscode/extensions.json
+.vscode/extensions.json
 !.vscode/extensions.json
 .idea
 *.suo
@@ -26,3 +26,4 @@ ProxyAPI-UI/.vscode/extensions.json
 *.njsproj
 *.sln
 *.sw?
+.env

Dockerfile

@@ -11,5 +11,6 @@ RUN npm run build-only
 # production stage
 FROM nginx:stable-alpine as production-stage
 COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

nginx.conf

+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

src/components/SidebarLeft.vue

@@ -34,5 +34,4 @@
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

src/router/index.ts

@@ -35,6 +35,10 @@ const router = createRouter({
       path: "/",
       redirect: { name: "buckets" },
     },
+    {
+      path: "/:pathMatch(.*)",
+      component: () => import("../views/NotFoundView.vue"),
+    },
   ],
 });
 

src/views/NotFoundView.vue

+<script setup lang="ts"></script>
+
+<template>
+  <div
+    class="container p-3 top-50 left-50 translate-middle position-fixed text-center"
+  >
+    <span class="fs-1 mb-5">Page Not Found</span><br />
+    <span class="fs-3"
+      >Back to the <router-link to="/">HomePage</router-link></span
+    >
+  </div>
+</template>
+
+<style scoped></style>