How to communicate between the host and the container?

[henophilia]

I have a use case where I would like my main application to call API endpoints exposed by the application running within the Webcontainer and vice versa. When my host server is running locally at localhost:3000 and I call fetch("http://localhost:3000/api/...") from within the Webcontainer, obviously it doesn't work, because that API endpoint does not exist within the container.

I already thought of a few rather "hacky" solutions, such as:

• Writing a file to the Webcontainer's file system whenever I want to communicate with it, and polling for changes within the Webcontainer.
• Using some sort of reverse proxy, so that e.g. "myapp.example.com" is forwarded to my host application running on localhost, and then I could just fetch "myapp.example.com" from within the Webcontainer.

But there must be a better solution for this kind of basic HTTP communication between host and container. How do I do this?

[svenhue]

The only working way i found out is using window.postmessage.

my setup is webcontainer with nuxtjs server.

Obviously this solution only works for the client side code.

To your client side code (which renders in the iframe) in the webcontainer add this:

window.addEventListener('message', event => {
// do something
});

in your parent document:

const el = const el = document.getElementById('mountpoint'); // the iframe
el.contentWindow.postMessage({type: 'ready'}, '*')

@EricSimons
would be a really helpful thing if we can communicate between a express server hosted in the webcontainer and the client side code of the parent window.