Merge branch 'no-dev-tools' into 'v3'

Remove dev tools from production app

Closes #768

See merge request openflexure/openflexure-microscope-server!582

apidocs/dev/webapp.md

@@ -22,9 +22,21 @@ When developing it is useful to use the development server so Vue changes happen
 
     npm run serve
 
-The development server is accessed on a different port from the microscope API. The port to access the development server is printed on the command line when you run the above command.
+The development server is accessed on a different port from the microscope API. When Vite starts, it creates a proxy that proxies all routes starting with `/api` to `http://localhost:5000/api`. This is useful when using either the simulation server or when developing directly on a microscope.
 
-When the development webapp starts it cannot locate the microscope API as this is served by the microscope on port 5000. Instead it will present you with a page giving you the option to "override API origin". If you are running a development server on your computer, you should enter `http://localhost:5000/`.
+If developing the webapp on a different computer you can run:
+
+    npm run serve:microscope
+
+This will proxy all routes starting with `/api` to `http://microscope.local:5000/api`.
+
+If your microscope hostname is not `microscope`, you can use local environment files to override this route. Create the file `.env.local` within the `/webapp/` directory, and in that file add the line
+
+    VITE_MICROSCOPE_HOST=http://myhostname.local:5000
+
+(changing `myhostname` to the correct host name.)
+
+**Note:** If you have performance issues with lag, this can be caused by mDNS speed for your setup. To avoid mDNS, overload `VITE_MICROSCOPE_HOST` with the IP address of your microscope, rather than the host name.
 
 # Javascript: Formatting and linting
 

webapp/package.json

@@ -9,7 +9,8 @@
   },
   "scripts": {
     "gv": "genversion src/version.js",
-    "serve": "vite serve --mode development",
+    "serve": "cross-env VITE_API_TARGET=local vite serve --mode development",
+    "serve:microscope": "cross-env VITE_API_TARGET=microscope vite serve --mode development",
     "build": "vite build --mode production",
     "lint": "eslint . --ignore-pattern .gitignore --max-warnings=0",
     "lint:fix": "eslint . --fix --ignore-pattern .gitignore",
@@ -34,6 +35,7 @@
     "@vue/eslint-config-prettier": "9.0.0",
     "autoprefixer": "^10.4.24",
     "core-js": "^3.46.0",
+    "cross-env": "^10.1.0",
     "eslint": "^9.39.2",
     "eslint-plugin-pinia": "^0.4.2",
     "eslint-plugin-prettier": "^5.1.0",

webapp/src/components/loadingContent.vue

@@ -4,18 +4,14 @@
       <div uk-spinner="ratio: 3"></div>
       <p>Loading...</p>
     </div>
-    <span class="material-symbols-outlined uk-align-center error-icon">error_outline</span>
+    <div v-if="error" id="error-container" class="uk-align-center">
-    <div v-if="error" class="uk-align-center">
+      <span class="material-symbols-outlined uk-align-center error-icon">error_outline</span>
-      {{ error }}
+      <p>{{ error }}</p>
-    </div>
-    <div class="uk-align-center">
-      <devTools class="uk-width-medium"></devTools>
     </div>
   </div>
 </template>
 
 <script>
-import devTools from "./tabContentComponents/aboutComponents/devTools.vue";
 import { mapWritableState } from "pinia";
 import { useSettingsStore } from "@/stores/settings.js";
 
@@ -23,10 +19,6 @@ import { useSettingsStore } from "@/stores/settings.js";
 export default {
   name: "LoadingContent",
 
-  components: {
-    devTools,
-  },
-
   computed: {
     ...mapWritableState(useSettingsStore, ["error", "waiting"]),
   },
@@ -34,6 +26,10 @@ export default {
 </script>
 
 <style scoped lang="less">
+#error-container {
+  text-align: center;
+}
+
 .error-icon {
   font-size: 120px;
 }

webapp/src/components/tabContentComponents/aboutComponents/devTools.vue

@@ -1,47 +0,0 @@
-<template>
-  <div>
-    <form class="uk-form-stacked" action="" method="GET" @submit="overrideAPIHost">
-      <label class="uk-form-label">Override API origin</label>
-      <input v-model="overrideOrigin" name="overrideOrigin" class="uk-input" type="text" />
-      <label class="uk-form-label">
-        <input v-model="reloadWhenOverridingOrigin" class="uk-checkbox" type="checkbox" />
-        Reload web app with new origin
-      </label>
-      <button class="uk-button uk-button-default uk-margin-small">Apply</button>
-    </form>
-  </div>
-</template>
-
-<script>
-import { mapWritableState } from "pinia";
-import { useSettingsStore } from "@/stores/settings.js";
-
-export default {
-  name: "DevTools",
-
-  data() {
-    return {
-      reloadWhenOverridingOrigin: true,
-    };
-  },
-
-  computed: {
-    ...mapWritableState(useSettingsStore, ["overrideOrigin", "origin"]),
-  },
-
-  methods: {
-    overrideAPIHost(event) {
-      if (!this.reloadWhenOverridingOrigin) {
-        this.origin = this.overrideOrigin;
-        event.preventDefault();
-      }
-    },
-  },
-};
-</script>
-
-<style scoped lang="less">
-.error-icon {
-  font-size: 120px;
-}
-</style>

webapp/src/components/tabContentComponents/aboutContent.vue

@@ -14,22 +14,16 @@
         Report an issue
       </a>
     </div>
-    <div class="uk-padding-small">
-      <h2>Developer tools</h2>
-      <devTools class="uk-width-large" />
-    </div>
   </div>
 </template>
 
 <script>
-import devTools from "./aboutComponents/devTools.vue";
 import statusPane from "./aboutComponents/statusPane.vue";
 
 export default {
   name: "AboutContent",
 
   components: {
-    devTools,
     statusPane,
   },
 };

webapp/src/stores/settings.js

@@ -3,15 +3,9 @@ import { ref, computed } from "vue";
 
 function getOriginFromLocation() {
   // This will default to the same origin that's serving
-  // the web app - but can be overridden by the URL.
+  // the web app.
-  // See also devTools.vue which can change the origin.
   let url = new URL(window.location.href);
-  let origin = url.searchParams.get("overrideOrigin");
+  return `${url.origin}/api/v3`;
-  if (origin) {
-    return origin;
-  } else {
-    return `${url.origin}/api/v3`;
-  }
 }
 
 // Define Pinia store
@@ -50,7 +44,8 @@ export const useSettingsStore = defineStore(
     function resetState() {
       waiting.value = false;
       available.value = false;
-      error.value = ""; // TODO: verify that "" is needed to match initial state
+      // On resetState there is no connection.
+      error.value = "Microscope is not connected.";
     }
 
     function setConnected() {

webapp/vite.config.mjs

@@ -4,58 +4,81 @@
 // Note: Comments are generated to explain relevant configuration options.
 
 import { fileURLToPath, URL } from "node:url";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ command, mode }) => {
-  plugins: [vue()],
+  const env = loadEnv(mode, process.cwd(), "");
 
-  build: {
+  var target;
-    // Output directory for production builds
+
-    outDir: "../src/openflexure_microscope_server/static",
+  if (command === "serve") {
-    // Clear output directory before build
+    if (env.VITE_API_TARGET === "local") {
-    emptyOutDir: true,
+      target = "http://localhost:5000";
-    chunkSizeWarningLimit: 400,
+    } else if (env.VITE_API_TARGET === "microscope") {
-    rollupOptions: {
+      target = env.VITE_MICROSCOPE_HOST || "http://microscope.local:5000";
-      output: {
+    } else {
-        manualChunks: {
+      throw new Error(`Invalid VITE_API_TARGET: ${env.VITE_API_TARGET}`);
-          "vue-vendor": ["vue", "pinia", "pinia-plugin-persistedstate"],
+    }
-          openseadragon: ["openseadragon"],
+    // Allow a console log as we were serving for development.
-          uikit: ["uikit"],
+    // eslint-disable-next-line no-console
-          utils: ["axios", "mitt", "mousetrap", "@vueuse/core"],
+    console.log(`Proxying /api → ${target}`);
+  }
+
+  return {
+    plugins: [vue()],
+
+    build: {
+      // Output directory for production builds
+      outDir: "../src/openflexure_microscope_server/static",
+      // Clear output directory before build
+      emptyOutDir: true,
+      chunkSizeWarningLimit: 400,
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            "vue-vendor": ["vue", "pinia", "pinia-plugin-persistedstate"],
+            openseadragon: ["openseadragon"],
+            uikit: ["uikit"],
+            utils: ["axios", "mitt", "mousetrap", "@vueuse/core"],
+          },
         },
       },
     },
-  },
 
-  resolve: {
+    resolve: {
-    alias: {
+      alias: {
-      // Setup path alias for src directory.
+        // Setup path alias for src directory.
-      // This allows importing modules using '@/path/to/module'.
+        // This allows importing modules using '@/path/to/module'.
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
+      },
+      // Recognize these file extensions for module resolution.
+      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
     },
-    // Recognize these file extensions for module resolution.
+    server: {
-    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
+      host: true,
-  },
+      // Set the development server port to 8080.
-  server: {
+      port: 8080,
-    host: true,
+      strictPort: true,
-    // Set the development server port to 8080.
+      proxy: {
-    // OFM uses port 5000, so we avoid conflicts. run, and override by using the address:
+        "/api": {
-    // http://microscope.local:8080/?overrideOrigin=http://microscope.local:5000/api/v3#
+          target,
-    port: 8080,
+          changeOrigin: true,
-    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,
       },
     },
-  },
+    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,
+        },
+      },
+    },
+  };
 });