SPA++ channel manager React server integration via iFrame

Hi fellow devs,

Im experimenting to integrate our React application (combination of node server and client side rendering) with Hippo SPA++ to serve te content and trying to get it to work with the channel manager editing buttons.

I started out with the demo react app from the Hippo SPA++ repo and that works fine, but is loaded in the same window with the bundle.js. Our setup doesnt have a bundle.js to render from as it is rendered on the server.
I changed the loading of the script to an iFrame in order to be able to render the node server url, but I was wondering how I can make sure the channelmanager can talk to the iFrame in order to render the container borders and cms edit buttons.
I have all the comments in the right place, but of course the window of the channelmanager is different from the window in the iFrame.

Doe anyone have any experience with this and a way to make this work? Maybe there is a different solution than the iFrame.
The cms and the react app dont live on the same origin (otherwise the window sharing would work I believe). I myself do not have a lot of jquery, react experience as Im mostly a java/hippo developer.


Channel Manager doesn’t check elements inside IFrames. So it is not possible to integrate the SPA in that approach with IFrames, unfortunately.

One possible solution I can think of is that you can make it work in both mode: (a) bundle js based and (b) served from node server. (a) is for preview in Channel Manager, and (b) is for live. Would it be possible?



If you’re using a server-side rendered / isomorphic React app, then you will have to use a reverse proxy that redirects requests from site preview (localhost:8080/site/_cmsinternal by default) to your node server.

Instructions on how to do this are described in a lab article on React integrations I wrote. See section 3.2 Server-side apps.

The React SDK contains a example server-side rendered React app using the Next.js framework.

Thanks Robert and Woonsan. Ill look into that!