[MGNLFE-17] SPA can tell if it is running in Pages App, in Preview, or in Production Created: 21/Jan/20  Updated: 08/Sep/20  Resolved: 28/Jan/20

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Improvement Priority: Major
Reporter: Christopher Zimmermann Assignee: Sang Ngo Huu
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 2.25d
Original Estimate: Not Specified

Issue Links:
Cloners
clones PAGES-205 Refresh iframe in PageEditor after tr... Closed
causality
is causing PAGES-224 DOC: SPA can tell if it is running in... Closed
relation
is related to MGNLFE-36 Bring "inEditorPreview" into React li... Closed
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)
Release notes required:
Yes
Documentation update required:
Yes
Date of First Response:
Epic Link: SPA Editor
Sprint: SPA Editor 12, SPA Editor 13, SPA Editor 14, UI Framework & 6.2 Ramp up 15
Story Points: 3

 Description   

User Story: As a SPA developer, I want to know if my SPA is in Pages Editor, Pages Preview or in Production, so that I can potentially hit different URL's for content or do rendering or other things conditionally.

Notes:

The page editor could set some globally accessible properties, for example by writing to the window object. The absence of these properties could be interpreted as being in production.

For example:

window.is_pages_app_editor = true;

window.is_pages_app_preview = true;



 Comments   
Comment by Christopher Zimmermann [ 28/Jan/20 ]

Please add a comment describing how to use this feature. rsiska

Comment by Sang Ngo Huu [ 04/Feb/20 ]

Provided some APIs to let developer know where SPA is running:

  • For Angular:
    • isDevMode() from '@angular/core' is also supported, when dev mode is enabled, you can see the comment when inspect the dom element when running in node dev server. Support for debugging ....
    • inject RendererContextService from @magnolia/angular-renderer, it provides some functions:
      RendererContextService#inEditor() # Tell SPA is in editor or not
      RendererContextService#inEditorPreview() # Tell SPA is in editor and in preview mode
      
  • For React:
    import { RendererContext } from '@magnolia/react-renderer';
    
    class YourComponent extends React.Component {
          static contextType = RendererContext;
    

    Then we can call this.context with some supported 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
    
Generated at Mon Feb 12 05:43:25 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.