Wow, this is amazing content! This is very great! Much appreciated! Can you please extend this lesson video with: 1. AEM React SPA Editor with Parsys and iParsys. To dynamically include. components, rather than to hardcode. Much thanks! 2. AEM React SPA Application with Routes. How does AEM render pages between pages, and how does cache work?
npm run develop gives me an error webpack-cli] Error: Compiling RuleSet failed: Exclamation mark separated loader lists has been removed in favor of the 'use' property with arrays (at ruleSet[1].rules[1].loader: style-loader!css-loader) at RuleSetCompiler.error (C:\Users\saide\AEM projects eact eact spa eact-app ode_modules\webpack\lib ules\RuleSetCompiler.js:365:10) at C:\Users\saide\AEM projects eact eact spa eact-app ode_modules\webpack\lib ules\UseEffectRulePlugin.js:152:29 at Hook.eval [as call] (eval at create (C:\Users\saide\AEM projects eact eact spa eact-app ode_modules\webpack ode_modules\tapable\lib\HookCodeFactory.js:19:10), :41:1) at RuleSetCompiler.compileRule (C:\Users\saide\AEM projects eact eact spa eact-app ode_modules\webpack\lib ules\RuleSetCompiler.js:175:19) at C:\Users\saide\AEM projects eact eact spa eact-app ode_modules\webpack\lib ules\RuleSetCompiler.js:152:9 at Array.map () at RuleSetCompiler.compileRules (C:\Users\saide\AEM projects eact eact spa eact-app ode_modules\webpack\lib ules\RuleSetCompiler.js:151:16) at RuleSetCompiler.compileRule (C:\Users\saide\AEM projects eact eact spa eact-app ode_modules\webpack\lib ules\RuleSetCompiler.js:182:30) at C:\Users\saide\AEM projects eact eact spa eact-app ode_modules\webpack\lib ules\RuleSetCompiler.js:152:9 at Array.map () npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! react-app@0.1.0 develop: `webpack --mode development` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the react-app@0.1.0 develop script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\saide\AppData\Roaming pm-cache\_logs\2020-11-29T09_18_35_958Z-debug.log
Hello, I followed the steps, but when I access index.html, it's a white page and also error is console stating that react is not defined. Do you have any idea?
Thanks for the great content, I am very new to AEM front. I have a couple of questions - 1. If react app is having its own navigation, will it be handled properly? 2. is it possible to do same with Angular?
Yes, you can. But depending on the application details, you might get "blocked by CORS policy" errors in JavaScript console because you're trying to load resources using the "file" protocol rather than the "HTTP" protocol.
Hi Anand ... Good Job you done. My question, how to implement existing AEM page component with replace React Component. Suppose I have 10 AEM route pages, earlier it was implemented by html and javascript. Now I want to change html java script to react component in every route pages.
Well done, this is a clear and informative explanation it will be used as my reference for AEM SPA.
Wow, this is amazing content! This is very great! Much appreciated!
Can you please extend this lesson video with:
1. AEM React SPA Editor with Parsys and iParsys. To dynamically include. components, rather than to hardcode. Much thanks!
2. AEM React SPA Application with Routes. How does AEM render pages between pages, and how does cache work?
awesome. this is really cool angle to understand the whole mechanism. thanks!
Good work Anand... very good tutorial explained in simple steps.
That’s a great explanation video, thanks a lot !
This is an amazing video. Could you please also share some videos related to moving from one page to another with out refreshing the page.
This video is soo helpful.thank you so much ..
Thanks , very much appreciated, please make a video, how to call api from AEM and bind it with components 👍
Hi ANAND, I Have a requirement to show two react components in two different pages. How can we route them. Can you please comment.
Excellent Job, thanks!!
Nice tutorial.
Note: Some of the steps described here are not needed if you use the AEM SPA Starter Kit Maven archetype.
yes its great video thanks for the content
do you teach?
npm run develop gives me an error
webpack-cli] Error: Compiling RuleSet failed: Exclamation mark separated loader lists has been removed in favor of the 'use' property with arrays (at ruleSet[1].rules[1].loader: style-loader!css-loader)
at RuleSetCompiler.error (C:\Users\saide\AEM projects
eact
eact spa
eact-app
ode_modules\webpack\lib
ules\RuleSetCompiler.js:365:10)
at C:\Users\saide\AEM projects
eact
eact spa
eact-app
ode_modules\webpack\lib
ules\UseEffectRulePlugin.js:152:29
at Hook.eval [as call] (eval at create (C:\Users\saide\AEM projects
eact
eact spa
eact-app
ode_modules\webpack
ode_modules\tapable\lib\HookCodeFactory.js:19:10), :41:1)
at RuleSetCompiler.compileRule (C:\Users\saide\AEM projects
eact
eact spa
eact-app
ode_modules\webpack\lib
ules\RuleSetCompiler.js:175:19)
at C:\Users\saide\AEM projects
eact
eact spa
eact-app
ode_modules\webpack\lib
ules\RuleSetCompiler.js:152:9
at Array.map ()
at RuleSetCompiler.compileRules (C:\Users\saide\AEM projects
eact
eact spa
eact-app
ode_modules\webpack\lib
ules\RuleSetCompiler.js:151:16)
at RuleSetCompiler.compileRule (C:\Users\saide\AEM projects
eact
eact spa
eact-app
ode_modules\webpack\lib
ules\RuleSetCompiler.js:182:30)
at C:\Users\saide\AEM projects
eact
eact spa
eact-app
ode_modules\webpack\lib
ules\RuleSetCompiler.js:152:9
at Array.map ()
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-app@0.1.0 develop: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-app@0.1.0 develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\saide\AppData\Roaming
pm-cache\_logs\2020-11-29T09_18_35_958Z-debug.log
Hello, I followed the steps, but when I access index.html, it's a white page and also error is console stating that react is not defined. Do you have any idea?
Thank you.
Very nice video. How can we apply this to the components, which are dropped on the page by Authors?
Thanks for the great content, I am very new to AEM front. I have a couple of questions -
1. If react app is having its own navigation, will it be handled properly?
2. is it possible to do same with Angular?
You can do this with Angular too. experienceleague.adobe.com/docs/experience-manager-learn/spa-angular-tutorial/overview.html?lang=en
Thanks much for the tutorial. Can we get the document which you are referring in the video
You can download it from here github.com/anandkilli/aem-spa-react/blob/master/Assets/Converting%20React%20app%20to%20AEM%20SPA%20editable.docx
Awesome
buildDev profile is not working
any implementation details of custom component
why is it required to place the App.js inside apache server docroot ? can't we just run a react application without apache web-server ?
Yes, you can. But depending on the application details, you might get "blocked by CORS policy" errors in JavaScript console because you're trying to load resources using the "file" protocol rather than the "HTTP" protocol.
Hi Anand ... Good Job you done. My question, how to implement existing AEM page component with replace React Component. Suppose I have 10 AEM route pages, earlier it was implemented by html and javascript. Now I want to change html java script to react component in every route pages.
hey I have the same question, what was your approach?
Hi Rahul, same question what was your approach here
can we have that document plz...
Do I need to install AEM first?
Yes
How u are getting the port 6402?
That's the port he configured for AEM. The default is 4502.
rename the jar to change the port, even you can change in start.bat file inside "CRX QUICKSTART" FOLDER.
No audio