Use vite's development proxy for api-override

This commit is contained in:
Julian Stirling 2026-05-10 14:27:50 +01:00
parent a58007a98c
commit 2b8d08c78c
4 changed files with 250 additions and 978 deletions

View file

@ -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