fix: webpack dev server + index fallback for prod serve.js

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) => {

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>

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,
       };
     },
 

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;
+}

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"

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,
     },