Is it feasible to integrate Panel back-end into React web-app front-end?

Hi, is it theoretically feasible/practical to integrate Panel into web-app made with React (ts/js)?
In my app, I have UI in React (using TypeScript) connected to Python (Flask-socketio) back-end. I don’t serve UI with Flask (I use it only for flask-socketio communication for sending and receiving data between my UI and backend server), it is most common pattern used in React web-apps connected to Flask.
Use case: I am developing app to process biophysical experiment data, currently I just use React-Plotly to interactively display xy scatter, but performance is not good with big data sets, so I want to use DataShader on server and to connect it to JS front end (Plotly or Bokeh) through Panel.

1 Like

Hi @KestutisM

Welcome to the community.

For sure it can be done. But how depends on you requirements.

If you don’t need the panel/ datashader part communicating with the rest of the react app you can use an iframe to embed panel/ datashader. Maybe even add one way communication via url arguments.

You can also serve/ embed panel apps in flask or django apps. There is some documentation on the panel site. And additional documentation on the bokeh site.

Maybe you could serve the panel/ datashader/ react app using a custom panel jinja template and hook into the web socket of panel/ bokeh?

I know @ea42gh has played around with Panel and custom web sockets. There are some examples here on discourse.

If your React need is not that big you Can consider trying out the ReactiveHTML pane already merged into the Panel master branch.

1 Like

@KestutisM

You can also try raising the question in the Bokeh discourse. They have a longer experience and been supporting more advanced use cases.

If you find a good solution please report back. The Panel community can learn from this. Thanks.

There is an example integrating React, Bokeh, fastapi that might give inspiration GitHub - akloster/bokeh-react-example

2 Likes