fix: Development environment proxy settings

Vite should redirect API requests from port 5173 to port 5000 to reach flask. We have to manually specify each root API endpoint.

backend/CONTRIBUTING.md

@@ -42,9 +42,11 @@ pip install --editable ./backend
 To run the app in development mode:
 
 ```bash
-flask --app backend.btviewer.app --debug run
+flask --app backend.btviewer.app --debug run --port 5000
 ```
 
+We must always use port 5000 because the front-end is configured to use that port.
+
 To run the frontend user interface in development mode, see the [frontend contribution guide](../frontend/CONTRIBUTING.md).
 
 ## Deployment

backend/btviewer/app.py

@@ -11,3 +11,4 @@
 ROOT_DIRECTORY = os.getenv('ROOT_DIRECTORY', Path(__file__).parent.parent.joinpath('tests/data'))
 
 app = create_app(root_directory=ROOT_DIRECTORY)
+"DEVELOPMENT Flask app"

backend/btviewer/app_factory.py

@@ -6,6 +6,7 @@
 from typing import Union
 
 import flask
+from werkzeug.middleware.dispatcher import DispatcherMiddleware
 
 
 def create_app(root_directory: Union[Path, str] = None, **kwargs) -> flask.Flask:

backend/btviewer/blueprints/photo/model.py

@@ -2,15 +2,15 @@
 import io
 import json
 from pathlib import Path
-from typing import Iterable, Mapping, Union, Generator
+from typing import Iterable, Mapping, Union, Generator, Tuple
 
 import PIL.Image
 import flask
 import numpy
 
 app: flask.Flask = flask.current_app
 
-Coordinate = tuple[int, int]
+Coordinate = Tuple[int, int]
 "x, y position in a 2D image pixel grid"
 
 

frontend/CONTRIBUTING.md

@@ -31,13 +31,12 @@ npm install
 The development environment is defined by the `dev` configuration in `package.json` and uses the [Vite](https://vitejs.dev/guide/#index-html-and-project-root) tool.
 
 ```
-
 # Run the development environment
 npm run dev
 ```
 
-
-
 ## Vite
 
-[Vite](https://vitejs.dev/) provides Hot Module Replacement (HMR) and some code analysis using ESLint rules. It uses `index.html` as the [home page](https://vitejs.dev/guide/#index-html-and-project-root).
+[Vite](https://vitejs.dev/) provides automatic code reloading using Hot Module Replacement (HMR) and some code analysis using ESLint rules. It uses `index.html` as the [home page](https://vitejs.dev/guide/#index-html-and-project-root).
+
+There is a configuration file for Vite at `frontend/vite.config.js` that specifies some proxy settings so that we can access the backend via the frontend testing app (which defaults to port 5173.)

frontend/src/components/CameraList.jsx

@@ -31,7 +31,7 @@ if (typeof(data)==="string"){ //when there is nth in the data, especially when t
   function changeHandler(e) {
     let selectedCamera = e.target.value;
     // Update the list of photo filenames available in that session
-    let url = `/api/sessions/list/?path=${subdirectory}/${selectedCamera}`;
+    let url = '/sessions/list/?path=${subdirectory}/${selectedCamera}';
     console.log(url)
     fetch(url)
       .then((response) => response.json())

frontend/src/components/DeviceList.jsx

@@ -31,7 +31,7 @@ if (typeof(data)==="string"){ //when there is nth in the data, especially when t
     let selectedDevice = e.target.value;
     console.log(selectedDevice)
     // Update the list of photo filenames available in that session
-    let url = `/api/sessions/list/?path=${subdirectory}/${selectedDevice}`;
+    let url = `/sessions/list/?path=${subdirectory}/${selectedDevice}`;
     console.log(url)
     fetch(url)
       .then((response) => response.json())

frontend/src/components/PhotoSelection.jsx

@@ -46,12 +46,12 @@ function PhotoSelection({ photoFilenames, subdirectory }) {
     console.log('subdirectoryJoined')
     console.log(subdirectoryJoined)
     //SC:Did we fetch photo, it does not seems so, and I only submit the image source to the image.jsx
-    let urlJpeg = "/api/photos/" + subdirectoryJoined.replace("np", "jpeg");
+    let urlJpeg = "/photos/" + subdirectoryJoined.replace("np", "jpeg");
     setCurrentPhoto(urlJpeg);
     console.log('urlJpeg' + urlJpeg);
 
     //Get photo dimension
-    let urlDimension = "/api/photos/dimension?path=" + subdirectoryJoined;
+    let urlDimension = "/photos/dimension?path=" + subdirectoryJoined;
     fetch(urlDimension)
       .then((response) => response.json())
       .then((data)=>{
@@ -63,7 +63,7 @@ function PhotoSelection({ photoFilenames, subdirectory }) {
       })
 
     // Get the json for the human/retrodetect label coordinates if it exists
-    let urlLabel = "/api/labels/detail?path=" + subdirectoryJoined;
+    let urlLabel = "/labels/detail?path=" + subdirectoryJoined;
     console.log("urlLabel");
     console.log(urlLabel);
     fetch(urlLabel)
@@ -76,18 +76,18 @@ function PhotoSelection({ photoFilenames, subdirectory }) {
   function handleNextPrevPhoto(current_path, skipnumber) {
     const currentPath = current_path;
     const skip = skipnumber;
-    let url = `/api/photos/next?path=${currentPath}&skip=${skip}`;
+    let url = `/photos/next?path=${currentPath}&skip=${skip}`;
     console.log("urlcurret photo in next");
     console.log(url);
 
     fetch(url)
       .then((response) => response.json())
       .then((data) => {
         setPhotoPath(data);
-        let urlJpeg = "/api/photos/" + data.replace("np", "jpeg");
+        let urlJpeg = "/photos/" + data.replace("np", "jpeg");
         setCurrentPhoto(urlJpeg);
 
-        let urlDimension = "/api/photos/dimension?path=" + data;
+        let urlDimension = "/photos/dimension?path=" + data;
         fetch(urlDimension)
             .then((response) => response.json())
             .then((data)=>{
@@ -97,7 +97,7 @@ function PhotoSelection({ photoFilenames, subdirectory }) {
              });
         })
 
-        let urlLabel = "/api/labels/detail?path=" + data;
+        let urlLabel = "/labels/detail?path=" + data;
         fetch(urlLabel)
         .then((response) => response.json())
         .then((data) => {

frontend/src/components/SessionList.jsx

@@ -26,7 +26,7 @@ function SessionList({ data }) {
     setSelectedSubdirectory(selected)
 
     // Update the list of photo filenames available in that session
-    let url = `/api/sessions/list/?path=${selected}`;
+    let url = `/sessions/list/?path=${selected}`;
     console.log('sessionslist')
     console.log(url)
     fetch(url)

frontend/src/components/Sessions.jsx

@@ -5,7 +5,7 @@ The list of bee tracking photo data capture sessions.
 */
 function Sessions() {
   // TODO use global variable for backend URL
-  const url = "/api/sessions/list";
+  const url = "/sessions/list/";
 
   console.log('sessions')
   console.log(url)

frontend/src/components/SetList.jsx

@@ -31,7 +31,7 @@ if (typeof(data)==="string"){ //when there is nth in the data, especially when t
     let selectedSet = e.target.value;
     console.log(selectedSet)
     // Update the list of photo filenames available in that session
-    let url = `/api/sessions/list/?path=${subdirectory}/${selectedSet}`;
+    let url = `/sessions/list/?path=${subdirectory}/${selectedSet}`;
     console.log('set')
     console.log(url)
     console.log(url)

frontend/vite.config.js

@@ -11,10 +11,17 @@ export default defineConfig({
     server: {
         // Create a proxy endpoint to the backend to avoid cross-origin (CORS) issues
         proxy: {
-            '/api': {
+            '/sessions': {
                 target: 'http://localhost:5000',
-                changeOrigin: true,
-                rewrite: (path) => path.replace(/^\/api/, ''),
+                changeOrigin: true
+            },
+            '/photos': {
+                target: 'http://localhost:5000',
+                changeOrigin: true
+            },
+            '/labels': {
+                target: 'http://localhost:5000',
+                changeOrigin: true
             },
         },
     },