Integration with static pages
Here is one suggestion for integrating static pages into the website:
- remove navigation bar from static pages, so that it is handled by us (including sign in, authentication status, etc)
- host drupal (the static pages) under the same domain as the react app, for example it might be inside a folder and located in https://assessment.hhmi.org/static while the app is running in https://assessment.hhmi.org
By having both sites on the same domain, we can:
- embed the static pages in an
<iframe>
and avoids possible CORS issues - access the DOM of the embedded page, so that we can modify all links that point to other internal pages into elements that emit a certain event (
window.parent.postMessage({ type: 'navigate', url: `${href}` })
) to the parent window and we handle the click by changing the route location and loading the requested page
This way we can avoid having two sets of authentication rules and two ways of navigation, one in our app and one in the static pages, which would need to be synced in order for both part to act in concert. Static pages would just serve html, the js logic is handled by our application.