Default app fails due to malformed url

[davesag]

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

[ittaibaratz]

I've seen this too. I believe this problem is because by default, the development server starts at http://localhost:3000. In my project, once I manually redirect to the correct page (http://localhost:3000/content/signage2020/en/home.html in my case), then the model loads correctly.

If so, then I'd say this is a feature request to have the dev server start at a specific path. Can you confirm this is the case for you as well?

[davesag]

It might be worth noting however that if I actually install the app into AEM via mvn clean install -PautoInstallSinglePackage then go to localhost:4502/editor.html/content/spa.mysamplespa/en.html I get the following

and if I then choose 'view as published' I see

rather than an error.

[davesag]

I've seen this too. I believe this problem is because by default, the development server starts at http://localhost:3000. In my project, once I manually redirect to the correct page (http://localhost:3000/content/signage2020/en/home.html in my case), then the model loads correctly.

If so, then I'd say this is a feature request to have the dev server start at a specific path. Can you confirm this is the case for you as well?

Yes. in my case going to http://localhost:3000/content/mysamplespa/en/home.html works as expected.

[ittaibaratz]

I did some digging and I think this redirection is not yet supported by CRA. It seems they do have a PR to support it, so we might need to wait for this PR to be merged before we can enable it in the archetype, unless we can find a way to do it around CRA, or use a customized react-scripts:

https://github.com/facebook/create-react-app/pull/7259

[ittaibaratz]

A different solution could be to update public/index.html to automatically redirect from http://localhost:3000 to the correct path. This will prevent relying on CRA to support PUBLIC_URL in development.

[davesag]

A different solution could be to update public/index.html to automatically redirect from http://localhost:3000 to the correct path. This will prevent relying on CRA to support PUBLIC_URL in development.

Interestingly the default public/index.html includes the following

<meta property="cq:pagemodel_root_url" content="/content/mysamplespa/en.model.json"/>

which appears to be being ignored

[samuelmeuli]

This confused me as well.

I implemented a fix a while ago in a PR that was closed. I updated the start scripts in package.json by the following:

• Angular: "start": "open-cli http://localhost:3000/content/${projectName}/en/home.html && ng serve --proxy-config ./proxy.aem.conf.json"
• React: "start": "open-cli http://localhost:3000/content/${projectName}/en/home.html && BROWSER=none react-scripts start"

This approach uses open-cli to automatically open the start page in the browser (and disables create-react-app's default behavior by setting BROWSER=none).

@ittaibaratz @davesag Let me know what you think of this approach and I could open a new PR for this feature.

[ittaibaratz]

@samuelmeuli how is open-cli able to open the URL before react-script has finished starting up? Also, will it load it in the same tab as the default one webpack opens, or will you get two tabs open?

[samuelmeuli]

@ittaibaratz open-cli is run first because ng serve/react-scripts start will run until stopped. We could also switch the order and use & instead of &&, or npm-run-all for better compatibility with Windows.

The Webpack behavior is disabled with BROWSER=none.

[ittaibaratz]

@samuelmeuli - I would rather put it in index.html because then we can also connect it to the .env.development file.

This would allow a developer to develop against other paths besides just /en/home. For example:

.env.development file: REACT_APP_PATH=/content/signage2020/en/home.html

index.html file body element:

<script> if (location.href == 'http://localhost:3000/' && '%REACT_APP_PATH%') { location.href += '%REACT_APP_PATH%'.replace(/^\//,''); } </script>