Getting started with local ui development

Software User interface
1

Hi all,

I’m trying to set up the hardware-less ui development on my machine.
So far I have:

  • Set up a mqtt server where I can see messages and connections
  • Set up the pioreactor repository I can run jobs through the cli (pio run …)
  • Cloned pioreactorui and initiated consumers with TESTING=1 huey_consumer pioreactorui.tasks.huey -n -b 1.0 -w 6 -f -C -d 0.05 as described in the README

However when running the flask app with

TESTING=1 GLOBAL_CONFIG=pioreactorui/config.dev.ini python3 -m flask --debug --app pioreactorui/main run -p 4999

The app starts, connects to MQTT and I get the following messages through debug:

 * Serving Flask app 'pioreactorui/main'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:4999
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 480-220-520
127.0.0.1 - - [31/Oct/2024 10:38:08] "GET / HTTP/1.1" 404 -
127.0.0.1 - - [31/Oct/2024 10:38:20] "GET /pioreactors HTTP/1.1" 404 -
127.0.0.1 - - [31/Oct/2024 10:39:10] "GET /index.html HTTP/1.1" 404 -

Which seems promising. But when I try to visit any page, I get the response “error - not found”.

I’m new to flask, so apologies if I’m missing the obvious. Thank you in advance!

(PS thanks to Cameron for help with my questions over email so far!)

2

It’s not documented (TODO), but you also need a local React server!

  1. Git clone the GitHub - Pioreactor/pioreactorui_frontend repo
  2. cd into the dir, and run npm install to download the dependencies
  3. run npm run start to start the React server.
  4. Then try visting http://localhost:3000/

You also may need to populate the sqlite3 database in the pioreactorui dir…

3

That’s working great, I am running the react server, I can see the requests coming through to the flask terminal and I have added the sqlite file from a pioreactor into the repository which it is successfully reading from.

I’m still getting a lot of 400 responses (see below) and there doesn’t appear to be any communication with my virtual background worker made by running TESTING=1 huey_consumer pioreactorui.tasks.huey...

Flask log:

127.0.0.1 - - [01/Nov/2024 16:23:33] "GET /api/contrib/experiment_profiles HTTP/1.1" 400 -
127.0.0.1 - - [01/Nov/2024 16:23:34] "GET /api/contrib/experiment_profiles HTTP/1.1" 400 -
127.0.0.1 - - [01/Nov/2024 16:23:34] "GET /api/configs/config.ini HTTP/1.1" 400 -
127.0.0.1 - - [01/Nov/2024 16:23:34] "GET /api/configs/config.ini HTTP/1.1" 400 -
127.0.0.1 - - [01/Nov/2024 16:23:37] "GET /api/workers/assignments HTTP/1.1" 200 -
127.0.0.1 - - [01/Nov/2024 16:23:37] "GET /api/contrib/jobs HTTP/1.1" 400 -
127.0.0.1 - - [01/Nov/2024 16:23:37] "GET /api/configs/config.ini HTTP/1.1" 400 -
127.0.0.1 - - [01/Nov/2024 16:23:37] "GET /api/workers/assignments HTTP/1.1" 200 -
127.0.0.1 - - [01/Nov/2024 16:23:37] "GET /api/experiments/Demo%20experiment/workers HTTP/1.1" 200 -
4

Oh, and you’ll probably need to add a .env file to the pioreactorui dir, with something like the following:

DOT_PIOREACTOR=/Users/camerondavidson-pilon/code/pioreactor

WWW=/Users/camerondavidson-pilon/code/pioreactorui

PIO_EXECUTABLE=/Users/camerondavidson-pilon/venvs/data/bin/pio
PIOS_EXECUTABLE=/Users/camerondavidson-pilon/venvs/data/bin/pios

There should also be a created pioreactor.log file that you can view to see logs and errors as well.

5

This works great, the 400’s have disappeared (the http 200 responses are still there, but I assume that’s correct). It can talk to the virtual reactor but I get the following error from the huey_consumer if I send any post requests from the UI:

2024-11-08T21:40:05+0000 [huey.consumer] ERROR Could not post to pioreactor01's endpoint /unit_api/jobs/run/job_name/self_test. Check connection?
6

Right, so huey (via api.py → tasks.py) will try to ping the pioreactor01 pioreactor’s webserver at http://pioreactor01.local/unit_api/jobs/...., but obviously there is no webserver at that address on your network. However, you can redirect that request back to the host machine by adding a line like:

127.0.0.1  pioreactor01.local

at the bottom of /etc/hosts (mac and linux only, not sure what the equivilant is for windows). Basically, any request to pioreactor01.local will redirect to 127.0.0.1 (host) and hit the running web server.

But the job still won’t run, since the machine needs to shell out to pio run self_test, and this step may fail. Usually I am just checking that the api call is made. I’ll test pio run X in a different development context.

7

Thanks for help. From what you’ve said my vision of a complete all-in-one virtual pioreactor is not how this works.

I can see how the different component parts pull together once the different levels have been tested, I will start working with that! Thanks again!