Visual SPA Editor FAQs

Is Magnolia personalization feature supported?

Yes, this feature is available since October 2021.

Check out the Personalization of headless SPA projects page.

Can the Page Editor load an app hosted on another server, like Next?

Yes, this feature is available since December 2021.

Check out the SPA hosting page.

How to provide good SEO for my SPA?

Because your public SPA is running completely outside of Magnolia, you should use whatever frontend delivery system makes the most sense for your team and project. We recommend some kind of SSR system such as Next, Nuxt, Render, Gatsby, or your own. This is the best practice to have a SPA with good SEO crawlabilty.

Is this a RAD App Builder?

Rapid Application Development (RAD) is an agile and rapid approach to building software with a strong focus on usability. It can be used to allow non-developers to assemble web apps & mobile apps in an intuitive way. However, it does not provide anything special to manage app state and events, that must be provided by your frontend project.

Not seeing green bars while editing?

In some instances, you may not be seeing the green edit bars while using the Visual SPA editor. If this is the case, try some of the following techniques.

Tip Notes

1

iframe preview URL

Make sure your iframe preview URL in the Pages app is correct.

This should be the Author SPA with the correct path name and query parameters.

2

Correct environment

Make sure the Author SPA is fetching data from the correct environment, the Magnolia Author instance.

It should fetch both the pages data and template annotations for the correct page.

3

Correct libraries

Ensure you’re using the latest frontend libraries.

4

HTML DOM comments

Check to see if there are any HTML comments in the DOM.

  • See comments?

  • Don’t see comments?

Try running the window.mgnlFrameReady() function from inside the preview iframe to attempt to render the green bars. There could be a race condition[1] which essentially tries to render the bars before your site is ready.

If this is the case, manually call window.mgnlFrameReady():

function myFunction() {
  const element = document.querySelector('.mgnlEditorBar');

  if (element) {
    clearInterval(intervalId);
  } else {
    window.mgnlFrameReady();
  }
}

const intervalId = setInterval(myFunction, 200); (1)
1 Where the time delay (200) is in milliseconds.

The green bars are placed in the Page Editor based on the comments that the frontend places in the HTML using one of the frontend libraries. It is imperative to have the HTML comments rendered.

  • Make sure the SPA fetches template annotations properly. It could be that it’s unaware it’s in the authoring context.

  • Make sure the call that the SPA makes can be run in incognito mode in your browser. Potentially, some security settings are preventing SPA from fetching template annotations.

Check the console log

  1. In your code, go to where you fetch the template-annotations.

  2. Check the console log to ensure it’s working properly.

    if (I_AM_INSIDE_MAGNOLIA) { (1)
  console.log('Hooray, I am here.') (2)
  console.log('I am trying to fetch:', 'MAGNOLIA/.rest/template-annotations/v1' + PATH_TO_NODE) (2)
  const templateAnnotationsRes = await fetch(
    'MAGNOLIA/.rest/template-annotations/v1' + PATH_TO_NODE
  );
  ...
  console.log('RESPONSE', templateAnnotations)
}
    1 If the code runs successfully inside the if statement, then it is running in the correct context for the Pages app.
    2 Print something along these lines to ensure the console log outputs the statement. This checks the correct URL is being used and you’re fetching from the correct Magnolia instance and page.

    If the response is okay, you should get the mappings for your HTML comments.

1. A race condition is a situation when several processes or threads are attempting to access the same resource.
Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules