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,11 +4,27 @@
 // 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 }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  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: {
@@ -41,10 +57,14 @@ export default defineConfig({
     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,
+      proxy: {
+        "/api": {
+          target,
+          changeOrigin: true,
+        },
+      },
     },
     css: {
       preprocessorOptions: {
@@ -58,4 +78,5 @@ export default defineConfig({
         },
       },
     },
+  };
 });