ui_migration feat(deps): setup vite mjs and index.html

2026-01-20 17:59:16 -06:00 · 2026-01-20 17:59:16 -06:00 · 3e528fdfa1
commit 3e528fdfa1
parent d6c636f0cb
3 changed files with 99 additions and 0 deletions
--- a/webapp/index.html
+++ b/webapp/index.html
@ -0,0 +1,25 @@
+// index.html
+// The main HTML file for the OpenFlexure Microscope web application.
+// Vite will use this file as a template to build the final HTML served to users.
+// It's at root directory to allow Vite to process it.
+// The previous version was located at public/index.html.
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="/favicon.ico">
+    <title>OpenFlexure Microscope</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    
+    <div id="app"></div>
+    
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/webapp/public/old.index.html
+++ b/webapp/public/old.index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>OpenFlexure Microscope</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/webapp/vite.config.mjs
+++ b/webapp/vite.config.mjs
@ -0,0 +1,57 @@
+// vite.config.mjs
+// Vite configuration file for a Vue 2 webapp using the Vue 2 compatibility build.
+// Vite replaces Vue CLI as the build tool. As it is designed for Vue 3, we use the
+// @vue/compat package to enable Vue 2 maintaining compatibility syntax and features.
+// Important: This is a preliminary setup, for vue2 to vue3 migration purposes.
+// Note: Comments are generated to explain relevant configuration options.
+
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // Enable Vue 2 compatibility mode.
+          compatConfig: {
+            MODE: 2
+          }
+        }
+      }
+    }),
+  ],
+  resolve: {
+    alias: {
+      // Use Vue 2 compatible build.
+      'vue': '@vue/compat',
+      // Setup path alias for src directory.
+      // This allows importing modules using '@/path/to/module'.
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+    // Recognize these file extensions for module resolution.
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+  },
+  server: {
+    host: true,
+    // Set the development server port to 8080.
+    // OFM uses port 5000, so we avoid conflicts. run, and override by using the address: 
+    // http://microscope.local:8080/?overrideOrigin=http://microscope.local:5000#
+    port: 8080,
+    strictPort: true,
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        // Always include math in Less files.
+        math: 'always',
+        // Enable relative URLs in Less files.
+        relativeUrls: true,
+        // Enable JavaScript in Less files
+        javascriptEnabled: true,
+      }
+    }
+  }
+})