From deeb164f29a035b84d7c6cb826e49eff426c8a9d Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Thu, 5 Jun 2025 11:16:53 +0000 Subject: [PATCH 1/4] Change from building with node 15 (end of life 2021) to node 18 (just gone EOL, but used on the Pi) --- .gitlab-ci.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 7dab41ab..6cd52db7 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -44,7 +44,7 @@ meta-build-image: - web .javascript: - image: node:15 + image: node:18 before_script: - cd webapp - npm install @@ -145,6 +145,7 @@ build: stage: build extends: .javascript script: + - export NODE_OPTIONS=--openssl-legacy-provider # Build JS application for production - npm run build artifacts: From e0d61f3b8726e705af3b206d5a0170bc84dde690 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Thu, 5 Jun 2025 12:27:22 +0100 Subject: [PATCH 2/4] De-duplicate npm build instructions --- README.md | 18 +++++------------- webapp/README.md | 15 +++++++++++---- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 766c4690..f88df89c 100644 --- a/README.md +++ b/README.md @@ -97,19 +97,11 @@ sudo -u openflexure-ws PATH="/var/openflexure/application/openflexure-microscope ### Set up the Javascript environment and build -* The Flask web application, written in Python, serves a web application written in `Vue.js`. This is distributed as part of the built version of the server, hosted on our [build server](https://build.openflexure.org/openflexure-microscope-server/). -* You could extract the pre-built web app from this tarball, which saves you having to set up Node.js. However, it also means you're not able to change the interface, and it's possible your interface will get out of sync with your server. -* Building the web interface will require a valid Node.js installation. If you don't have Node.js (including `npm`) the [Node.js website](https://nodejs.org/en/) offers downloads for all platforms, though see the instructions below for Raspberry Pi. - * To install Node.js on a Raspberry Pi: - * `curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -` - * `sudo apt install nodejs` -* To build the web application (this produces a set of static files, that are served by the Flask webserver) - * `cd webapp` - * `npm install` - * `npm run build` -* To create a Node.js development server (this will help various development tools to display more information, and auto-rebuilds when you change the source files) - * `npm run serve` - * You access the development server on a different port (it's printed on the command line when you run the above command). This means that when it starts up you will need to tell it where the microscope server is, using the "override API origin" field in the page that pops up. If you are running a test server on your computer, this is most likely `http://localhost:5000/`. + +The Labthings-FastAPI server, written in Python, serves a web application written in `Vue.js` (Vue2). This is distributed with the SD card image for the microscope. + +For more details on the web app see the ReadMe in the [webapp](./webapp) directory. + ## Formatting, linting, and tests All of the commands below assume that you are running in the OFM virtual environment, i.e. you have run `ofm activate` on an OpenFlexure SD card, or `source .venv/bin/activate` on Linux, or `.venv/Scripts/activate`on Windows. diff --git a/webapp/README.md b/webapp/README.md index 84fd69c2..ffec7d6a 100644 --- a/webapp/README.md +++ b/webapp/README.md @@ -18,11 +18,18 @@ * Install Node.js (and npm) * Install dependencies with `npm install` -* Node v18 changes SSL, and so you need `$env:NODE_OPTIONS = "--openssl-legacy-provider"` on Windows or `export NODE_OPTIONS=--openssl-legacy-provider` on Linux/MacOS for compatibility. +* Node v18 changes SSL, and so you need a legacy version for compatibility: + * On Windows: `$env:NODE_OPTIONS = "--openssl-legacy-provider"` + * On Linux/MacOS `export NODE_OPTIONS=--openssl-legacy-provider` * Build the static web app with `npm run build` -* Serve a development version with `npm run serve` -We generally run this on the Raspberry Pi (as that is where the Webapp is hosted). If this isn't suitable - for example, if you can't install Node on your microscope due to version conflicts or no internet connection - you can build it on your computer instead, and then copy over the contents of `..\src\openflexure_microscope_server\static` to your Pi (using scp or another file transfer method). +# Developing + +When developing it is usefule t use the development server so Vue changes happen instantly without the need to rebuild. To start the development server run: + + npm run serve + +You access the development server on a different port (it's printed on the command line when you run the above command). This means that when it starts up you will need to tell it where the microscope server is, using the "override API origin" field in the page that pops up. If you are running a test server on your computer, this is most likely `http://localhost:5000/`. ## VS Code and ESLint @@ -39,4 +46,4 @@ To prevent the editor from interfering with ESLint, add to your project `setting "source.fixAll.eslint": true } } -``` \ No newline at end of file +``` From 41c91ea712580ecdfaa610b817a429b4c7602051 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Fri, 6 Jun 2025 08:54:55 +0000 Subject: [PATCH 3/4] Apply 2 suggestion(s) to 1 file(s) Co-authored-by: William Wadsworth --- webapp/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webapp/README.md b/webapp/README.md index ffec7d6a..fc940196 100644 --- a/webapp/README.md +++ b/webapp/README.md @@ -25,11 +25,11 @@ # Developing -When developing it is usefule t use the development server so Vue changes happen instantly without the need to rebuild. To start the development server run: +When developing it is useful to use the development server so Vue changes happen instantly without the need to rebuild. To start the development server run: npm run serve -You access the development server on a different port (it's printed on the command line when you run the above command). This means that when it starts up you will need to tell it where the microscope server is, using the "override API origin" field in the page that pops up. If you are running a test server on your computer, this is most likely `http://localhost:5000/`. +You access the development server on a different port (it's printed on the command line when you run the above command). This means that when the webapp starts up you will need to tell it where the microscope server is, using the "override API origin" field in the page that pops up. If you are running a test server on your computer, this is most likely `http://localhost:5000/`. ## VS Code and ESLint From 3c47f9872721b8d29c6068000346827bba6b8f88 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Fri, 6 Jun 2025 10:16:12 +0000 Subject: [PATCH 4/4] Clarify webapp README section on dev server ports. --- webapp/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/webapp/README.md b/webapp/README.md index fc940196..8af6af95 100644 --- a/webapp/README.md +++ b/webapp/README.md @@ -29,7 +29,9 @@ When developing it is useful to use the development server so Vue changes happen npm run serve -You access the development server on a different port (it's printed on the command line when you run the above command). This means that when the webapp starts up you will need to tell it where the microscope server is, using the "override API origin" field in the page that pops up. If you are running a test server on your computer, this is most likely `http://localhost:5000/`. +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. + +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/`. ## VS Code and ESLint