Renderer context of a SPA page

The SPA front-end helper JavaScript libraries provide APIs that let you know about the current renderer context of a SPA page, that is whether it is running in the Pages editor, Pages preview or in a production setup. This is useful if you need to hit different URLs for content, do rendering or other things conditionally. The APIs provide context status functions for Angular and React.  

Angular

To find out about the editor/preview status, inject the RendererContextService from the @magnolia/angular-renderer. You can then call the following functions:

RendererContextService#inEditor() # Tell SPA is in editor or not

inEditorPreview() # Tell SPA is in editor and in preview mode

To get the current status of the dev mode, call the isDevMode() function that is part of the @angular/core library. If the dev mode is enabled, you can see the comment when inspect the DOM element when running in node dev server.

React

In React, make sure that you import {RendererContext} from the @magnolia/react-renderer and that the class of YourComponent extends the React.Component. 

After assigning static contextType = RendererContext you may call the following functions:

this.context.inEditor # Tell SPA is in editor or not

this.context.inEditorPreview # Tell SPA is in editor and in preview mode

this.context.isDevMode # is in dev mode or not