Embedding Streamlit applications in an iframe and communicating via postMessage + Render Deployment with Docker and nginx

Hi there!

I post here in the hope that it may be useful to someone in the community. I have been facing exactly this problem for the last few days and have found no answer to it.

Background

This tool was developed to meet a basic need: to pass information between a Streamlit application, embedded in an iFrame , and a JavaScript based WebApplication (Vue, React…) via postMessage, using an EventListener.

Implementation

The component uses streamlit-javascript to execute the javascript code.

streamlit_post_message facilitates the communication between a Streamlit application embedded in an iFrame and its parent window. The communication is handled using the postMessage API via an EventListener in JavaScript.

At the following link you will find the source code and some technical details:

source code

Within the repository you can also find a demo demonstrating how the tool works.

Within the same repository you will find the nginx configuration file used for the reverse proxy during the deployment of the demo, via container, on Render, of the demo itself.

I hope it can be useful to someone thanks to the SEO provided by the topics in this community, any feedback (or insult) is welcome.

Happy coding :+1:t2: