Comments (9)
@ittaibaratz another alternative would be to add an additional webpack module to build process to rewrite the compiled CSS before using clientlib-generator to move it into a client-library...
I think it's cleaner to rewrite only in the AEM folder, this way the built scripts inside the react project's build folder will still work independently.
I have created a PR in aem-clientlib-generator which will enable this. If they don't accept, we can do the rewriting after the clientlib was generated inside the AEM folder - This is very easy to do with replace-in-file
from aem-spa-project-archetype.
I managed to get the static assets over to AEM by tweaking clientlib.config.js:
...resources: [ "build/static/media/*.*" ]
The problem is that in the CSS files, the URL of the assets is something like:
http://localhost:4502/static/media/AvenirLTStd-Book.ecb0c2ae.otf
however in AEM we require that the URL get rewritten to something like
http://localhost:4502/etc.clientlibs/mysamplespa/clientlibs/mysamplespa-react/resources/AvenirLTStd-Book.ecb0c2ae.otf
from aem-spa-project-archetype.
Raised wcm-io-frontend/aem-clientlib-generator#14 which will be required in order to solve this.
from aem-spa-project-archetype.
@ittaibaratz another alternative would be to add an additional webpack module to build process to rewrite the compiled CSS before using clientlib-generator to move it into a client-library...
from aem-spa-project-archetype.
@ittaibaratz Thanks for taking care of this issue and driving the discussion.
from aem-spa-project-archetype.
I have closed the PR - Will look for a cleaner alternative which will support both CSS and JS.
from aem-spa-project-archetype.
I have done some research and here are the possible options to support CRA static assets within AEM:
-
Rewrite the URLs in the CSS and JS files after they have been compiled. This works but its not very clean.
-
Use an existing react-scripts fork that allows tweaking the CRA webpack config. For example react-app-rewired or react-scripts-rewired
-
Create our own fork of react-scripts and tweak the webpack config in there. This is the recommended approach - See Alternatives to ejecting
from aem-spa-project-archetype.
For my own app, I've decided to use react-scripts-rewired which is the simplest solution to allow webpack override. Here are the steps I've taken. These make sure all assets work in AEM when referenced in both CSS and JS: (Note PROJECT should be replaced with actual project name)
- Install react-scripts-rewired:
npm install --save-dev react-scripts-rewired
- Created webpack.config.extend.js at the react root folder with the following content:
(This is hard coded, so ideally should be more robust - But works well with CRA 2.0 webpack config)
module.exports = function override(config, env) {
config.module.rules[2].oneOf[0].options.name = "etc.clientlibs/<PROJECT>/clientlibs/<PROJECT>-react/resources/[name].[ext]";
config.module.rules[2].oneOf[7].options.name = "etc.clientlibs/<PROJECT>/clientlibs/<PROJECT>-react/resources/[name].[ext]";
return config;
}
- Also created webpackDevServer.config.extend.js :
module.exports = function override(config, env) {
return config;
};
- Changed clientlib.config.js as follows:
assets: {
js: [
"build/static/**/*.js"
],
css: [
"build/static/**/*.css"
],
resources: [
"build/etc.clientlibs/<PROJECT>/clientlibs/<PROJECT>-react/resources/*.*"
]
}
- Add the following line to the .env file:
SKIP_PREFLIGHT_CHECK=true
from aem-spa-project-archetype.
hi @ittaibaratz
I am facing the same issue and trying to implement your solution, however when I try to run npm install after installing react-scripts-rewired; I get the following error -
npm ERR! code ETARGET
npm ERR! notarget No matching version found for react-scripts-rewired@^3.0.1--latest1
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'react-app'
npm ERR! notarget
would you know what might be the issue here, did you also face the same issue?
Will appreciate your reply.
Thanks
from aem-spa-project-archetype.
Related Issues (20)
- Lighthouse checks with CircleCI
- The desired archetype does not exist (com.adobe.cq.spa.archetypes:aem-spa-project-archetype:1.0.5-SNAPSHOT) HOT 2
- Default app fails due to malformed url HOT 10
- Fix flaky tests on macOS CI HOT 1
- Update to use latest Core Components dependency HOT 1
- Typo in README
- Page with no extension is not rendered
- Update Jackson dependencies
- Angular Archetype discrepancies with Wknd Events code repo HOT 2
- The desired archetype does not exist (com.adobe.cq.spa.archetype:aem-spa-project-archetype:4.0.0 HOT 2
- [Angular] Authorable component does not refresh automatically when in AEM Edit mode HOT 5
- Text Component Fails to Render after upgrading to Angular 9
- Add a convenience NPM script to deploy the project into AEM locally HOT 1
- React Code splitting HOT 8
- wrong path of filter.xml in pom.xml HOT 2
- Doesn't work on IE 11 HOT 2
- Sling mapping url shortening support HOT 2
- React app does not load on publish instance due to HierarchyPageImpl HOT 3
- mvn test fails for newly generated project HOT 5
- SPA Principles in Multi Module Project? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aem-spa-project-archetype.