adobe / aem-spa-project-archetype Goto Github PK

Leave off this selection as a default value, so the user has to choose as angular and react are both working options in the AEM SPA editor

With #27 jest is used for testing.
Migrate the existing karma test to jest.

Hey, this is really cool archetype to get started with AEM SPA editor. I am happy to see it available, earlier I used a shell script to modify references in reference spa app for generating custom SPA project which was provided in the BETA release. Excited to use in my next demo soon :) .

Another side -

Issue 1 - please update README.md file with latest version 1.0.3-SNAPSHOT but currently it's set -DarchetypeVersion=1.0.0-SNAPSHOT. Updating version fixed build issue.

Issue 2- while Creating project in interactive mode, projectName and projectTitle are set always with default values, My Sample SPA and mysamplespa

In order to extract OSGi services from the core package created by the archetype, add maven-scr-plugin to the POM.

Use case - Create servlets to be consumed by the SPA, OSGi services consumed by Sling Models, etc.

Will provide a PR when I get a chance.

A cleaner solution could be to use: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

ex: react-app/src/setupProxy.js

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy(
      ['**/*.model.json', '**/*.jpg', '**/*.jpeg', '**/*.png'], 
      { 
          target: process.env.REACT_APP_API_HOST,
          auth: process.env.REACT_APP_AEM_ADMIN_AUTH
    }
    ));
};

By making this change we should be able to get rid of the following conditional step [0] and potentially the {{CustomModelClient}}. If necessary, the {{CustomModelClient}} could potentially be reintroduced in conjunction with an SSR setup.

[0] https://github.com/adobe/aem-spa-project-archetype/blob/development/src/main/resources/archetype-resources/react-app/src/index.js#L42-L47

Due to limitation in archetype generator (see https://issues.apache.org/jira/browse/ARCHETYPE-308) user is not asked for a value of required property that have default value (unless it's a reference to another property).

The only workaround is to use another property and use it a reference in original property, but it would be confusing and with ARCHETYPE-308 fixed, user would get asked twice for the same property.

For now we need to document this limitation that occurs in interactive mode and suggest batch mode to have full control on generated project.

This is needed in order to allow using the history object to programmatically move between routes.

This is a simple change, and I'll provide a PR when I get to it. It is explained properly here.

Essentially we need to change the following in index.js:
<BrowserRouter> <App cqChildren=... /> </BrowserRouter>), document.getElementById('page'));

to
const history=createBrowserHistory(); ... <Router history={history}> <App history={history} cqChildren=... /> </Router>

This will give access to the history object, allowing it to update routes as a result of state changes.

When attempting to generate a new SPA project the archetype doesn't seem to be found in any public catalogs. I assume it should be uploaded to nexus.adobe.com, i.e https://repo.adobe.com/nexus/content/groups/public/com/adobe/granite/archetypes/aem-project-archetype/

Command:

mvn archetype:generate 
-DarchetypeGroupId=com.adobe.cq.spa.archetypes     
-DarchetypeArtifactId=aem-spa-project-archetype       
-DarchetypeVersion=1.0.4

Error:

[INFO] Scanning for projects...
[INFO]                                                                         
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Stub Project (No POM) 1
[INFO] ------------------------------------------------------------------------
[INFO] 
[INFO] >>> maven-archetype-plugin:3.0.1:generate (default-cli) > generate-sources @ standalone-pom >>>
[INFO] 
[INFO] <<< maven-archetype-plugin:3.0.1:generate (default-cli) < generate-sources @ standalone-pom <<<
[INFO] 
[INFO] --- maven-archetype-plugin:3.0.1:generate (default-cli) @ standalone-pom ---
[INFO] Generating project in Interactive mode
[INFO] Archetype repository not defined. Using the one from [com.adobe.cq.spa.archetypes:aem-spa-project-archetype:1.0.3-SNAPSHOT] found in catalog local
[WARNING] The POM for com.adobe.cq.spa.archetypes:aem-spa-project-archetype:jar:1.0.4 is missing, no dependency information available
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 3.259 s
[INFO] Finished at: 2019-02-27T18:02:03-08:00
[INFO] Final Memory: 18M/316M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:3.0.1:generate (default-cli) on project standalone-pom: The desired archetype does not exist (com.adobe.cq.spa.archetypes:aem-spa-project-archetype:1.0.4) -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

Ideally, the starter kit should generate a react-app that is not ejected from the Create React App script. This will provide several benefits:

• Simplifies the react-app project configuration and minimizes the dependencies to track
• Starts the project using conventions recommended by Facebook
• Easy for customers to update to the latest version or customize
• Common starting point for React developers

Help file refers to -DarchetypeVersion=1.0.3-SNAPSHOT, but current version is 1.0.5-SNAPSHOT

Currently the routing in Angular is static. Make this routing dynamic.
Note: In React the routing is already dynamic.

We know that react doesn't support IE11 , but I hope AEM SPA developers didn't completely exclude IE11 from it's support matrix.

http://localhost:4502/editor.html/content/we-retail-journal/react/en/home.html

Adding import 'react-app-polyfill/ie11';
import 'core-js'; in App/index.js also doesn't solve the issue.

Please let us know how to enable SPA app and SPA authoring on IE11

The Starter Kit should not have any reference to the SSR implementation in the code, poms, readme, ...

Bug Report

Current Behavior
Generated a new project using archetype 1.1.0, running mvn test will fail on the analyze-classes goal:

[ERROR] Failed to execute goal org.apache.jackrabbit:filevault-package-maven-plugin:1.0.1:analyze-classes (default-analyze-classes) on project care.all: Error while analysing imports: C:\src\aem-spa-sample\two\care\core\target\classes (Access is denied) -> [Help 1]

This is actually related to this issue: adobe/aem-project-archetype#161 which is fixed by bumping the filevault-package-maven-plugin to 1.0.3. (would need to be fixed in this archetype I guess)

After updating the version to 1.0.3 the generate-metadata step will now fail. Not sure if this is plugin related or something needs to be set in the configuration for the all module.

[ERROR] Failed to execute goal org.apache.jackrabbit:filevault-package-maven-plugin:1.0.3:generate-metadata (default-generate-metadata) on project care.all: Could not open subpackage 'C:\src\aem-spa-sample\two\care\ui.apps\target\classes' to extract metadata: C:\src\aem-spa-sample\two\care\ui.apps\target\classes (Access is denied) -> [Help 1]

Decided to open here (my first bug report in GitHub anywhere) since the version needs to be updated in this archetype project as well.

Expected behavior/code
Executing mvn test will succeed

Environment

• AEM 6.4 SP3
• AEM SPA Archetype 1.1.0
• Java(TM) SE Runtime Environment (build 1.8.0_191)

Possible Solution
Bump version of filevault-package-maven-plugin to 1.0.3 (fixes one part of the problem)

There is a known issue with required properties to set which have default values, see https://issues.apache.org/jira/browse/ARCHETYPE-308?attachmentSortBy=fileName.
As this issue is from 2015 and seems to needs some while to be fixed, remove all default values from archetype required properties

Note: With generate goal, the first time, no default value is asked for.
When you answer N to confirmation, then any property is asked for, proposing a default value.

When there is no access to /conf folder ( and hence the page policy) to anonymous user on publish instance, then content attribute is empty as it gets populated via HierarchyPageImpl and code is not able to access conf folder

so to fetch the model json it accesses the current page's model

But when anonymous user has access to 'conf' folder, then it is populated

and now there are two calls to for model.json

because of these two calls nothing gets loaded in the app. I know the call is originated by page model manager, but the app should load in case of two calls as well, or the page specific call should not be initiated when rootmodel url is populated.

For now I removed the content attribute in rootmodel meta tag altogether, please let me know the better and appropriate solution.

Feature Request

Is your feature request related to a problem? Please describe.

It would be nice to integrate Lighthouse into the CircleCI setup so we can test whether PRs decrease the PWA score before merging them.

Describe the solution you'd like

Lighthouse Bot currently only supports Travis CI, but there is an open PR adding CircleCI support (GoogleChromeLabs/lighthousebot#68). I suggest using this solution once the PR is merged.

Are there alternatives?

The lighthouse-ci package looks promising as well, but it would be preferable to use the solution from Google. Lighthouse Bot also provides a nice output of the scores on PRs.

If I want to test my app in AEM, currently I have to run Maven at the top folder which completes in about 2 minutes.

As a Frontend developer, I want to be able to quickly synchronize the app into AEM without having to go through Maven. The workflow is going to be as simple as:

1. "npm run sync" - This will run a listener which will watch the aem folder for changes
2. "npm run build" - In order to build the app. This takes time but still much faster than running Maven.

Pull request coming shortly.

An established AEM convention is to use the profile autoInstallBundle to deploy just a project's OSGi bundles to a local AEM instance. Currently, this is done with the profile autoInstallPackage. In order to promote consistency across projects the autoInstallBundle profile should be used.

In pom.xml of ui.apps and ui.content, the path of filter.xml in

<filterSource>${basedir}/META-INF/vault/filter.xml</filterSource>

tag is incorrect

so the packages deployed in AEM don't have filter.xml and can't be uninstalled.

The correct path is

<filterSource>${basedir}/src/main/content/META-INF/vault/filter.xml</filterSource>

This issue is in the latest 1.1.1-SNAPSHOT version from develop branch

AEM ships with an old GCC. It doesn't seem wise to run the JS code through AEM's old GCC when, at build time, we have the most modern minification tools at our disposal in the Node ecosystem.

The JS delivered into the clientlib should already be optimized and minified by the webpack build.

While removing the AEM dependency for the responsive grid is great, AEM's responsive grid is generated via parameterized inputs (IIRC gutter, and columns?). It appears a pre-baked grid is included that as generated using opaque params.

It would be better if AEM Responsive Grid can be pulled out into an NPM module that can be included and parameterized to the customer's needs.

6.3.1.2 version of the uber jar. AFAIK the SPA editor is only supported on 6.4 + SP2 [1]
Direct embeds of SPA editor dependencies. Seems like updating the uber jar would help?
Core Components are not embedded as a subpackage, it should be embedded as part of ui.apps like the AEM Project Archetype

CI tests on macOS are temporarily disabled because they are flaky.

Stack trace: https://github.com/adobe/aem-spa-project-archetype/pull/94/checks?check_run_id=260497228#step:4:5220

Lines that might be relevant:

2019-10-15T10:22:46.6726090Z [INFO] [ERROR] [ERROR] Some problems were encountered while processing the POMs:
2019-10-15T10:22:46.6733330Z [INFO] [ERROR] Unresolveable build extension: Plugin com.day.jcr.vault:content-package-maven-plugin:0.0.24 or one of its dependencies could not be resolved: Failed to read artifact descriptor for com.day.jcr.vault:content-package-maven-plugin:jar:0.0.24 @ 
...
2019-10-15T10:22:46.7430030Z [INFO] Caused by: org.apache.maven.wagon.TransferFailedException: Connect to repo.adobe.com:443 [repo.adobe.com/192.147.130.162] failed: Operation timed out (Connection timed out)

Might be related to https://stackoverflow.com/questions/30861293/maven-not-working-when-mvn-package-command-is-run/32514413#32514413

Internal issue: CQ-4281649

The documentation talks about "Java 1.8 or higher", but I cannot compile with Java 11.0.2.
Changing to Java 1.8.121 it works

This is the detail of the error

[INFO] [ERROR] Tests run: 2, Failures: 0, Errors: 2, Skipped: 0, Time elapsed: 1.989 s <<< FAILURE! - in com.adobe.spa.test.projects.internal.models.PageImplTest
[INFO] [ERROR] testConfigChildPage(com.adobe.spa.test.projects.internal.models.PageImplTest) Time elapsed: 0.152 s <<< ERROR!
[INFO] java.lang.NoClassDefFoundError: javax/annotation/PostConstruct
[INFO] at com.adobe.spa.test.projects.internal.models.PageImplTest.testConfigChildPage(PageImplTest.java:213)
[INFO] Caused by: java.lang.ClassNotFoundException: javax.annotation.PostConstruct
[INFO] at com.adobe.spa.test.projects.internal.models.PageImplTest.testConfigChildPage(PageImplTest.java:213)
[INFO]
[INFO] [ERROR] testRequestFilteredNestedChildPages(com.adobe.spa.test.projects.internal.models.PageImplTest) Time elapsed: 0.012 s <<< ERROR!
[INFO] java.lang.NoClassDefFoundError: javax/annotation/PostConstruct
[INFO] at com.adobe.spa.test.projects.internal.models.PageImplTest.testRequestFilteredNestedChildPages(PageImplTest.java:235)
[INFO]
[INFO] [INFO]
[INFO] [INFO] Results:
[INFO] [INFO]
[INFO] [ERROR] Errors:
[INFO] [ERROR] PageImplTest.testConfigChildPage:213 » NoClassDefFound javax/annotation/PostCo...
[INFO] [ERROR] PageImplTest.testRequestFilteredNestedChildPages:235 » NoClassDefFound javax/a...
[INFO] [INFO]
[INFO] [ERROR] Tests run: 2, Failures: 0, Errors: 2, Skipped: 0
[INFO] [INFO]
[INFO] [INFO] ------------------------------------------------------------------------
[INFO] [INFO] Reactor Summary:
[INFO] [INFO]
[INFO] [INFO] Test SPA Angular Project Reactor ................... SUCCESS [ 0.403 s]
[INFO] [INFO] Test SPA Angular Project Core ...................... FAILURE [ 32.001 s]

Bug Report

Current Behavior
When creating an SPA with the Archetype, the SPA will not render properly on an AEM Publish instance.

The page model root url meta tag renders empty:
<meta property="cq:pagemodel_root_url"/>

This leads the SPA to load the model for the current page (i.e. myapp/en/home) instead of the parent page (i.e. myapp/en) and breaks navigation.

Expected behavior/code
SPA should render correctly on publish instances, loading the model for the parent page and not the current page.

Environment

• AEM 6.5 L22
• AEM SPA Archetype 1.0.5-SNAPSHOT
• JRE version 1.8.0_151-b12

Possible Solution
Update the ACLs under /conf.
I can workaround the issue but giving the anonymous user read access to /conf.

It would be good to standardize on naming and idioms used across the SPA projects.
In Angular this is called "MainContenComponet" and in the React app, its the "PageComponent", yet they represent the same logical construct.

Based on going through the Getting started project here, it seems like the approach of using aem-clientlib-generator does not allow for utilizing code splitting for react in AEM. I posted an issue about this on that project and it was suggested that i post the question here.

Adobe-Marketing-Cloud/aem-guides-wknd-events#52

The Create React App used by this archetype will create JS, CSS and static assets under the build folder:

However, aem-clientlib-generator used by this library will only copy the JS and CSS files.
As a result, when static resources are used by the app (Fonts, background images, etc) - They will be broken in AEM.

The installed Angular version is 6, which is old. The latest stable version is 7.

Is there a reason why cannot install the latest stable version of Angular, since we are not allowing the Angular version itself to be selected?

[1] https://www.npmjs.com/package/@angular/core

The archetype template contains default gitignore files, however they are not copied to the generated project.

The gitignore files should be automatically copied to the project to save developer efforts.

Bug Report

Current Behavior

I have generated a basic react single page app, adjusted the cors settings in the AEM Author environment, and launched the development server.

The app runs but I get the following error

Uncaught (in promise) Error: while fetching the model for url: http://localhost:4502/.model.json, status: Bad Request
    at index.js:50
(anonymous) @ index.js:50
Promise.then (async)
(anonymous) @ index.js:49

The issue seems to be that the url being fetched is incorrect.

I can go to http://localhost:4502/content/mysamplespa/en.model.json and the content loads correctly so it seems that /content/mysamplespa is missing from the url that React is trying to fetch.

Expected behavior/code

I expect an out of the box React app to work without errors.

Environment

• AEM version AEM 6.5
• AEM SPA Archetype 1.1.0
• JRE version Java(TM) SE Runtime Environment (build 1.8.0_92-b14)

Possible Solution

I've had a look through the generated source code and can't see anywhere where fetch is actually being invoked.

Additional context / Screenshots

The /apps/APP folder should not use merge mode. This means that when we update our components, those updates will not reflect when we install a newer package.

<filter root="/apps/mysamplespa" mode="merge"/>

Hi, I have found <meta charset="utf-8" /> missing in public/index.html which broke my fonts and were not loaded on page and giving 304.

Before adding UTF-8

After adding UTF-8

It looks like ui.apps is expected to embed core.wcm.components.all but when deployed to AEM I don't see this subpackage embedded:

<!-- ui.apps/pom.xml -->
<subPackages>
                        <subPackage>
                            <groupId>com.adobe.cq</groupId>
                            <artifactId>core.wcm.components.all</artifactId>
                            <filter>true</filter>
                        </subPackage>
                    </subPackages>

Not sure if its easier to just move the core components subpackage to be added in all/pom.xml ?

Either way Core Components should be deployed as a subpackage.

It seems like the clientlib deployment does not cleanup previous deployments as seen below:

This is a problem because webpack adds a hash to the resources to avoid over-caching.

Feature Request

As a Frontend developer, I want to be able to push my project into a local AEM instance without having to use Maven.

Describe the solution you'd like
Create an additional script inside package.json which will call Maven to build and deploy the project onto AEM.

Are there alternatives?
The alternative is for frontend developers to use Maven directly.

Documentation
Users will simply run
npm run deploy-local

It appears that the CustomModelClient was accidentally left over (it is floating outside the /app folder). This file is also ~undocumented making it confusing as to its purpose and/or how/when to use it.

I'd recommend moving sample snippets into documentation, and documenting them well.

See how the angular project tackles exposing sample/illustrative code for ideas: https://angular.io/guide/http#intercepting-requests-and-responses

This is a question rather than a feature request/bug.

There is no sling mapping support in the outputted json, is that right? The outputted model.json; if it has any internal link which starts form /content/mysite/en/newpage , will it respect the sling mapping and out put the html with the domain name appended and the url shortened asper the sling mapping? As per my understanding for static page load html parsing happens at run time via sling rewriters transformers which rewrite the links. But since the html is formed on the fly via react, sling rewriters transformers won't come into picture and the outputted json(and the html formed from it) will alwyas have full links starting from content.

Please let me know if my understanding is right.

AEM version: AEM 6.4.2

The Core bundle relies on a dependency on com.fasterxm.jackson.* version 2.9.7.

However, on AEM 6.4 + SP2 the dependency included is 2.8.4. This causes the bundle to fail to start:

com.fasterxml.jackson.annotation,version=[2.9,3) -- Cannot be resolved

I understand there is a security issue with version 2.8.4, perhaps the latest version of the bundle can be embedded in the project? Or maybe in AEM 6.4 + SP3 this dependency can be updated?

Traditional AEM modules/naming conventions should be used. Something like:
core - java bundle (hierarchyImpl)
ui.apps - /apps
ui.content - /conf, /content
react-app or angular-app (depending on choice)
The above are well-understood conventions by AEM developer community and will help with adoption.
In the content module, the filter.xml for /conf and /content should have a mode set to merge to avoid overwriting authored changes on an AEM environment when deploying an update.

I understand this will serve a single package to AEM, which will include two sub-packages of ui.apps and core, but is there a significant advantage here?
It slightly complicates the archetype and differs from https://github.com/Adobe-Marketing-Cloud/aem-project-archetype. The two archetypes should be as closely aligned as possible. When not directly related to SPA capabilities, established conventions of the aem-project-archetype should be used.

Steps to reproduce

1. Archetype setup:
   Follow Building SPA Starter Kit Archetype of README.md file
2. Create a project in batch mode (see Using SPA Starter Kit Archetype in README.md) using the following command
   (Remark: this is the current minimal set of properties required to define)

mvn archetype:generate -B \
    -DarchetypeCatalog=local  \
     -DarchetypeGroupId=com.adobe.cq.spa.archetypes  \
     -DarchetypeArtifactId=aem-spa-project-archetype  \
     -DarchetypeVersion=1.0.0-SNAPSHOT \
     -DgroupId=com.adobe.spa.testing 

3. go into the created project folder and build it with mvn clean install

Experienced

The build fails

Expected

The build passes successfully

Bug Report

Current Behavior

I have been following the instructions in the readme, cloned this repo, ran mvn clean install archetype:update-local-catalog and then mvn archetype:crawl, then created a new folder and ran

mvn archetype:generate \
 -DarchetypeCatalog=internal \
 -DarchetypeGroupId=com.adobe.cq.spa.archetypes  \
 -DarchetypeArtifactId=aem-spa-project-archetype  \
 -DarchetypeVersion=1.0.5-SNAPSHOT

and it failed with

[INFO] Generating project in Interactive mode
[WARNING] Archetype not found in any catalog. Falling back to central repository.
[WARNING] Add a repository with id 'archetype' in your settings.xml if archetype's repository is elsewhere.
[WARNING] The POM for com.adobe.cq.spa.archetypes:aem-spa-project-archetype:jar:1.0.5-SNAPSHOT is missing, no dependency information available
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  18.945 s
[INFO] Finished at: 2019-10-15T09:53:36+05:30
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:3.1.2:generate (default-cli) on project standalone-pom: The desired archetype does not exist (com.adobe.cq.spa.archetypes:aem-spa-project-archetype:1.0.5-SNAPSHOT) -> [Help 1]

Expected behavior/code

I expected a new project to be successfully generated

Environment

• AEM version and patch level (e.g. AEM 6.5 installed via docker - see https://github.com/pawangonnakuti/aem-author/blob/master/Dockerfile)
• AEM SPA Archetype 1.1.0
• JRE version Java(TM) SE Runtime Environment (build 1.8.0_92-b14)

Possible Solution

No idea

Additional context / Screenshots

None

Extracting all EditConfigs and MapTo's into a single mappings.ts is confusing and breaks the separation of concerns (the concerns for a single component are both split up, and then partially consolidated into a single monolithic file). Ideally, each Component would define its own EditConfig as well as MapTo.

karma-webdriver-launcher uses cryptiles 3.1.2. Upgrade to cryptiles to version 4.1.2 or later is recommended to get rid of this security vulnerability.

I am wondering if there is any reason that I would not (or should not) be able to apply the way SPA project is setup to a more generic multi module project (say created from the archetype https://github.com/adobe/aem-project-archetype). I.E. I am trying to add a react-app module to a multi module project and make it so that any React components I implement can show up in the AEM touch UI editor as components that can be placed on any page by the AEM publisher. Therefore making it possible for React components and HTL components (the default of the multi module project) to be used on the same page along side each other.

I do realize this would be giving up some of the best advantages of using a single page app (correct me if I'm wrong) since each React component would end up reloading every time a new page is navigated to, whereas in a SPA project the page only ever loads once and keeps rendering UI during navigation (and also may use Redux to manage data in order to never get the same network data more than once). I have no say in this decision, it's unfortunately required that I somehow add React components to a non-SPA (multi module) project :/ Other than that I am thinking the React components should be interchangeable with the HTL components.

I'm using AEM 6.5

Any input, opinion or advice is appreciated. Thanks!

fyi @godanny86

This issue is the same as the one fixed for Sample Content via https://github.com/adobe/aem-sample-we-retail-journal/pull/16/files

Steps to reproduce:

• Use the archetype to generate a starter kit and upload it on an AEM instance.
• Navigate to any page generated by the archetype
• Add a text component
• Select the newly created text component
• Open the dialog and edit once
• Re-open the dialog and edit a second time
• Start the inline edit
• Cancel or save (The issue already occurred)
• Re-open the dialog and edit a third time

Current
The text component isn't properly updated with the expected content

Expected
The text component is properly updated with the expected content

There is a sizeable gap/padding when editing the sample React app in the Site's Editor:

When viewing in Preview or published mode the padding disappears:

I believe this issue originates from the inclusion of a locked responsive grid at the root of the application: http://localhost:4502/content/mysamplespa/en.model.json

{
":items": {
"root": {
"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
"columnCount": 12,
"columnClassNames": {},
":items": {},
":itemsOrder": [],
":type": "wcm/foundation/components/responsivegrid"
}
},
":itemsOrder": [
"root"
],
":children": {},
":hierarchyType": "page",
":path": "/content/mysamplespa/en",
"title": "Root Page My Sample SPA App",
":type": "mysamplespa/components/app"
}

I think* just removing the responsivegrid in the app template structure would avoid this issue. But perhaps there is another way?