Merge branch 'build-with-node-18' into 'v3'

Change from building with node 15  to node 18

See merge request openflexure/openflexure-microscope-server!281

.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:

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.

webapp/README.md

@@ -18,11 +18,20 @@
 
 * 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 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
+
+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
 
@@ -39,4 +48,4 @@ To prevent the editor from interfering with ESLint, add to your project `setting
         "source.fixAll.eslint": true
     }
 }
-```
+```