[PAGES-187] Present an SPA running on an external server Created: 04/Jul/19  Updated: 24/Sep/19  Resolved: 24/Sep/19

Status: Closed
Project: Magnolia pages module
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Story Priority: Major
Reporter: Mikaël Geljić Assignee: Sang Ngo Huu
Resolution: Obsolete Votes: 0
Labels: None
Remaining Estimate: 0.25d
Time Spent: 11.5d
Original Estimate: Not Specified

Issue Links:
Relates
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: SPA Editor
Sprint: SPA Editor 2, SPA Editor 3, SPA Editor 4, SPA Editor 5, SPA Editor 6, SPA Editor 7
Story Points: 8

 Description   

Usually, when developing frontend projects, developers may run a local Node server with live reload. Magnolia does not necessarily need to serve the page. Also for production projects, it's not uncommon for SPAs to be compiled/deployed as static resources on CDNs.

Start with the assumption that an SPA page is presented/served externally, on a different server. Could be Node for (local) development, nginx for production, etc.

Log potential limitations or benefits vs. rendering by Magnolia.

ideas:

  • first denominator: mgnl:template property
  • action in page-editor? maybe too complex with availability
  • url config in template definition?
  • open up support in pages app


 Comments   
Comment by Sang Ngo Huu [ 25/Jul/19 ]

The idea is put external link to page editor and then edit it easily. For ex: node dev server is `http://localhost:3000`

But there is an error when getting the remote content XSS. When I put node dev server link into page editor, this code does not work

            try {
                document = event.getFrame().getContentDocument();
            } catch (JavaScriptException e) {
                GWT.log("Error getting content document from iframe: " + e.getMessage());
            }

There is a workaround solution to communicate with iframe: https://caniuse.com/#feat=x-doc-messaging

But it does not help on this case, it is just send the message cross the iframe

So, I think we have to use html page with built source from node

Comment by Sang Ngo Huu [ 26/Jul/19 ]

This is example project to verify the workaround solution

https://git.magnolia-cms.com/users/sang.ngo/repos/iframe-xss/browse

Comment by Christopher Zimmermann [ 06/Aug/19 ]

It's possible for a magnolia page template script to load the JS bundle directly from the live Node server. You can see an example of this at the bottom of this template script: https://github.com/magnolia-community/react-area51-alpha/blob/master/mag-aliens-demo/light-modules/react-aliens/templates/pages/standard.ftl

To get the development server to generate that one single file instead of a collection of files, takes some configuration on a create-react-app based project.

Comment by Mikaël Geljić [ 13/Aug/19 ]

Alright, converted to story, returning to the backlog for now; will be used to validate page-editor/iframe communication once more advanced.

Comment by Simon Lutz [ 24/Sep/19 ]

Decided to go for the approach to load the JS bundle.

Generated at Mon Feb 12 06:16:28 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.