Closed davesag closed 4 years ago
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?
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.
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.
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:
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.
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
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:
"start": "open-cli http://localhost:3000/content/${projectName}/en/home.html && ng serve --proxy-config ./proxy.aem.conf.json"
"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.
@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?
@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
.
@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>
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
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 6.5
1.1.0
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