From 3cad4d319ea6c99bf9c1bb891d3b3eec4e07f0d8 Mon Sep 17 00:00:00 2001
From: Dragory <2606411+Dragory@users.noreply.github.com>
Date: Sat, 30 Mar 2024 13:33:29 +0000
Subject: [PATCH] fix: webpack dev server + index fallback for prod serve.js

---
 dashboard/serve.js                            | 5 +++++
 dashboard/src/components/dashboard/Layout.vue | 6 +++++-
 dashboard/src/components/docs/DocsLayout.vue  | 7 ++++---
 dashboard/ts-vue-shim.d.ts                    | 5 +++++
 dashboard/tsconfig.json                       | 4 ++--
 dashboard/webpack.config.js                   | 2 +-
 6 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/dashboard/serve.js b/dashboard/serve.js
index be205414..5bb473d6 100644
--- a/dashboard/serve.js
+++ b/dashboard/serve.js
@@ -4,6 +4,11 @@ const path = require("path");
 
 fastify.register(fastifyStatic, {
   root: path.join(__dirname, "dist"),
+  wildcard: false,
+});
+
+fastify.get("*", (req, reply) => {
+  reply.sendFile("index.html");
 });
 
 fastify.listen({ port: 3002, host: '0.0.0.0' }, (err, address) => {
diff --git a/dashboard/src/components/dashboard/Layout.vue b/dashboard/src/components/dashboard/Layout.vue
index 79d19701..9a46852c 100644
--- a/dashboard/src/components/dashboard/Layout.vue
+++ b/dashboard/src/components/dashboard/Layout.vue
@@ -4,7 +4,7 @@
 
     <nav class="flex items-stretch flex-wrap pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl mb-8">
       <div class="flex-full md:flex-initial flex items-center">
-        <img class="w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
+        <img class="w-10 mr-5" :src="logoUrl" alt="" aria-hidden="true">
 
         <router-link to="/dashboard">
           <h1 class="font-semibold">Zeppelin Dashboard</h1>
@@ -48,6 +48,7 @@
 
 <script>
   import Title from "../Title.vue";
+  import logoUrl from "../../img/logo.png";
 
   export default {
     components: {
@@ -59,5 +60,8 @@
         window.location.pathname = '/';
       }
     },
+    data() {
+      return { logoUrl };
+    },
   };
 </script>
diff --git a/dashboard/src/components/docs/DocsLayout.vue b/dashboard/src/components/docs/DocsLayout.vue
index 48c46183..be7e8e5e 100644
--- a/dashboard/src/components/docs/DocsLayout.vue
+++ b/dashboard/src/components/docs/DocsLayout.vue
@@ -5,7 +5,7 @@
     <!-- Top bar -->
     <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
       <div class="flex-initial flex items-center">
-        <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
+        <img class="flex-auto w-10 mr-5" :src="logoUrl" alt="" aria-hidden="true">
 
         <router-link to="/docs">
           <h1 class="flex-auto font-semibold">Zeppelin Documentation</h1>
@@ -50,10 +50,10 @@
 </template>
 
 <script lang="ts">
-  import Vue from "vue";
   import {mapState} from "vuex";
   import Menu from 'vue-material-design-icons/Menu.vue';
   import Title from "../Title.vue";
+  import logoUrl from "../../img/logo.png";
 
   type TMenuItem = {
     to: string;
@@ -131,7 +131,8 @@
 
     data() {
       return {
-        mobileMenuOpen: false
+        mobileMenuOpen: false,
+        logoUrl,
       };
     },
 
diff --git a/dashboard/ts-vue-shim.d.ts b/dashboard/ts-vue-shim.d.ts
index 0660bd67..aba13e68 100644
--- a/dashboard/ts-vue-shim.d.ts
+++ b/dashboard/ts-vue-shim.d.ts
@@ -2,3 +2,8 @@ declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
 }
+
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
diff --git a/dashboard/tsconfig.json b/dashboard/tsconfig.json
index 7aeece3d..9e1288ba 100644
--- a/dashboard/tsconfig.json
+++ b/dashboard/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "es2018",
     "sourceMap": true,
@@ -15,7 +15,7 @@
     "esModuleInterop": true,
     "allowJs": true
   },
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "src/**/*.vue", "./ts-vue-shim.d.ts"],
   "references": [
     {
       "path": "../shared/tsconfig.json"
diff --git a/dashboard/webpack.config.js b/dashboard/webpack.config.js
index 9f21c8e9..54b45cba 100644
--- a/dashboard/webpack.config.js
+++ b/dashboard/webpack.config.js
@@ -173,7 +173,7 @@ if (process.env.NODE_ENV === "production") {
     mode: "development",
     devtool: "eval",
     devServer: {
-      ...(process.env.DEV_HOST ? { host: process.env.DEV_HOST } : undefined),
+      allowedHosts: "all",
       historyApiFallback: true,
       port: 3002,
     },