Need Help on AEM integration with Microfrontend along with steps
In that case I believe those two online resources gives you enough knowledge to get an idea about how things work and how to make an initial project setup.
As I see it, long story short, all comes down to put your frontend solution into your AEM project and have it built, packaged and delivered along with the AEM artifacts. Typically you will have the React components or other library solution into ui.frontent (i have seen it in ui.apps as well sometimes).
Then you need a way to package them as AEM clientlibs and shifted with the AEM artifacts when you build and deploy your AEM project. I guess that is the inflection point that is not thoroughly explained. They all use https://github.com/eirslett/frontend-maven-plugin plugin to tap into the Maven build cycle and build your frontend in the process.
So basically your pom file can contain something like this:
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<executions>
<execution>
<id>npm build production</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run build:microfrontent</arguments>
</configuration>
</execution>
</executions>
</plugin>During AEM maven build, it will also invoke the script run build:microfrontent, which will have to be defined in the package.json file. This script can either be a webpack command or react-app-rewired command as decribed in those two articles, or it can directly be a custom JS script that you need write that will programmatically have to transform your React, or whatever stuff you have, into AEM clientlibs.
1. Using webpack command
The webpack.dev.js is mentioned in the article you shared. And I image it will be used like this:
"scripts": {
"build:microfrontent": "rm -rf ../ui.apps/src/main/content/jcr_root/apps/project/clientlibs/* && webpack -d --env dev --config ./webpack.dev.js && clientlib --verbose",
},For this, your transformation logic will go into webpack.dev.js:
Content of this file I cannot share unfortunately, as it is confidential, but maybe you can get some inspiration from here:
https://www.freecodecamp.org/news/an-intro-to-webpack-what-it-is-and-how-to-use-it-8304ecdc3c60/
2. Using react-app-rewired
The article you shared already covers everything I believe
3. Using custom JS
The command will look something like:
"scripts": {
"build:microfrontent": "node ./package-microfrontend.js"
},Again the content of package-microfrontend.js file I cannot share due to confidentiality aspect, but I can tell it should be developed by someone who know how to work with files in JS, with read & write operations.
I have not had a chance to try this yet. Please check this article - https://jcdubs.medium.com/serverless-vue-micro-frontend-b4eda030137d if it helps to proceed.
Thanks
Narendra
Related Conversations
