How to combine javascript/react frontend and python backend?

Question

I'm not quite sure if my question is a duplicate, but I wasn't able to find something helping me in my case.

Set Up
I've built a frontend webpage which contains a couple of services, for example show some timeseries and other information about my system. The website is build with the react framework and so using javascript in general.
Now I want to do some calculations about the timeseries for example calculate the similarity and other features of my sensordata. For that I'm using python which offers me a lot of libraries I've used for a long time and are easy to use.


What I'm looking for:
I'm looking for a very simple way to call my backend-timeseries-analysis-python script from the react GUI passing some variables like the length of the series. Also I want to process the returned values and safe the current values needed for normalization (like max,min) for further calculations.

So the procedure would look like the following:

1) Type value in react frontend input box
2) react/javascript calls pythonscript/ initialize a class and passes variables to class
3) python calculates similarity of sensor data 
4) python returns similarity values to frontend and saves classes for later call
5) react displays returned values
6) react/javascript calls pythonscript
7) python compares latest data to past data and refreshs treshholds(like max, min)
8) python calculates similarity of sensor data 
9) continue.. 

Thanks for your help!

Solution 1

You can expose your Python scripts on a REST API which will be called by your React frontend. Database connection will be made by this API, and the response is sent to your frontend.

See Flask (very simple for small projects) or even Django to build Python APIs.

Solution 2

Check out Streamlit. It's a very good alternative to Flask /Django. I am a backend python guy and have no experience in using frontend but I was able to spin up the front end quickly with Streamlit.

Comments

[nail]

Thank you very much. I'm looking into flask right now and it seems to be what I was looking for.

[nail]

After spending a few hours, flask seems to be a bit complicated, because its a multipage server and react only a one-page-server, flask seems to integrate only poorly in my existing react framework. So basicially I'm looking for a more straight forward way to call the python script directly from javascript.

[Martin]

@Sayydika I'm also looking for this. Did you manage, since the time you published this 1 year ago, to find something to communicate between a Python script and a JS SPA?

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

[Olivier Berg]

Alternatively you could you something like fastapi to create a rest API.