Use vite's development proxy for api-override

apidocs/dev/webapp.md

@@ -22,9 +22,19 @@ 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 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 environament files to override this route. Create the file `.env.local` within the `/webapp/` directory within that file add the line
+
+    VITE_MICROSCPOPE_HOST=http://myhostname.local:5000
+
+(changing `myhostname` to the correct 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/vite.config.mjs

@@ -4,58 +4,79 @@
 // 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({
-  plugins: [vue()],
+export default defineConfig(({ command, mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
 
-  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"],
+  var target;
+
+  if (command === "serve") {
+    if (env.VITE_API_TARGET === "local") {
+      target = "http://localhost:5000";
+    } else if (env.VITE_API_TARGET === "microscope") {
+      target = env.VITE_MICROSCPOPE_HOST || "http://microscope.local:5000";
+    } else {
+      throw new Error(`Invalid VITE_API_TARGET: ${env.VITE_API_TARGET}`);
+    }
+    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: {
-    alias: {
-      // Setup path alias for src directory.
-      // This allows importing modules using '@/path/to/module'.
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    resolve: {
+      alias: {
+        // 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"],
     },
-    // 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/api/v3#
-    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,
+    server: {
+      host: true,
+      // Set the development server port to 8080.
+      port: 8080,
+      strictPort: true,
+      proxy: {
+        "/api": {
+          target,
+          changeOrigin: 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,
+        },
+      },
+    },
+  };
 });