Fix dynamic importing in production build

package-lock.json

@@ -31,6 +31,7 @@
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.0.3",
         "vite": "^3.0.9",
+        "vite-plugin-dynamic-import": "^1.2.4",
         "vue-cli-plugin-vuetify": "~2.5.8",
         "webpack-plugin-vuetify": "^2.0.0-alpha.0"
       }
@@ -7753,6 +7754,15 @@
         }
       }
     },
+    "node_modules/vite-plugin-dynamic-import": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.2.4.tgz",
+      "integrity": "sha512-R6spqDhDm8VxaUNyEkybh9PM262ReO8WXJ6rjtyJ/H8Y4b+pq2uM9Xz5DMu7N7OxUGlqo9HSzT3VjhpbySXrng==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "~3.2.12"
+      }
+    },
     "node_modules/vue": {
       "version": "3.2.39",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.39.tgz",
@@ -13641,6 +13651,15 @@
         "rollup": "~2.78.0"
       }
     },
+    "vite-plugin-dynamic-import": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.2.4.tgz",
+      "integrity": "sha512-R6spqDhDm8VxaUNyEkybh9PM262ReO8WXJ6rjtyJ/H8Y4b+pq2uM9Xz5DMu7N7OxUGlqo9HSzT3VjhpbySXrng==",
+      "dev": true,
+      "requires": {
+        "fast-glob": "~3.2.12"
+      }
+    },
     "vue": {
       "version": "3.2.39",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.39.tgz",

package.json

@@ -13,9 +13,9 @@
     "@meforma/vue-toaster": "^1.3.0",
     "@vue/cli-service": "^5.0.8",
     "ag-grid-vue3": "^28.2.0",
+    "ansi-to-html": "^0.7.2",
     "core-js": "^3.25.1",
     "event-hooks-webpack-plugin": "^2.2.0",
-    "ansi-to-html": "^0.7.2",
     "pinia": "^2.0.21",
     "roboto-fontface": "*",
     "single-spa-vue": "^2.5.1",
@@ -31,6 +31,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.3",
     "vite": "^3.0.9",
+    "vite-plugin-dynamic-import": "^1.2.4",
     "vue-cli-plugin-vuetify": "~2.5.8",
     "webpack-plugin-vuetify": "^2.0.0-alpha.0"
   }

skaffold.yaml

@@ -5,7 +5,7 @@ metadata:
 
 build:
   artifacts:
-  - image: harbor.codemowers.eu/eaas/logmower-frontend
+  - image: harbor.codemowers.eu/erkiaas/logmower-frontend
     docker:
       dockerfile: Dockerfile
 
@@ -22,9 +22,9 @@ profiles:
       - command: dev
     build:
       artifacts:
-        - image: harbor.codemowers.eu/eaas/logmower-frontend
+        - image: harbor.k-space.ee/playground/logmower-frontend
           docker:
-            target: dev
+            target: prod
           sync:
             manual:
               - src: 'src/**/*.vue'
@@ -39,4 +39,4 @@ profiles:
                 dest: .
     manifests:
       rawYaml:
-        - k8s/dev/deployment.yaml
+        - k8s/dev/deployment-camtiler.yaml

src/components/LogViewer.vue

@@ -90,8 +90,8 @@ export default {
     fetch('/events/backend')
         .then((response) => response.text())
         .then((response) => {
-          this.backend = response
-          import( /* @vite-ignore */  './Grid/Main/configs/' + response)
+          this.backend = response // TODO handle bad gateway etc
+          import(`./Grid/Main/configs/${response}.js`)
               .then(module => {
                 this.defaultColDef = module.default.defaultColDef
                 this.columnDefs = module.default.columnDefs

vite.config.js

@@ -1,9 +1,12 @@
 import vue from '@vitejs/plugin-vue'
+import dynamicImport from 'vite-plugin-dynamic-import'
+import * as path from "path";
 
 export default {
   resolve: {
     alias: {
-      vue: 'vue/dist/vue.esm-bundler.js'
+      vue: 'vue/dist/vue.esm-bundler.js',
+      '@': path.join(__dirname, 'src/components/Grid/Main/configs'),
     }
   },
   rollupOptions: {
@@ -11,13 +14,16 @@ export default {
     format: 'system',
     preserveEntrySignatures: true
   },
-  plugins: [vue({
-    template: {
-      transformAssetUrls: {
-        base: '/src'
-      }
-    }
-  })],
+  plugins: [
+      vue({
+        template: {
+          transformAssetUrls: {
+            base: '/src'
+          }
+        },
+      }),
+      dynamicImport(/* options */)
+  ],
   pluginOptions: {
     vuetify: {
       // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader