Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Frontend changes are not reflecting on build.

Avatar

Level 3

Hi,

 

I am facing an issue with ui.apps and ui.frontend modules. I have built both the modules with maven commands but the changes are not reflecting on page. But when I manually export the clientlibs to the aem server then the changes are reflecting.

 

But the core is working with maven command. 

 

 

NOTE: I have built whole project and checked. Only backend changes are reflecting but not frontend.

 

Commands used for build:
Whole project: mvn clean install -PautoInstallSinglePackage

Ui.apps: mvn clean install -PautoInstallPackage

 

 

 

 

@arunpatidar @lukasz-m @BrianKasingli 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

HI @SRC_AEM_DEV ,

The is mostly happening because ui.frontend module not leveraging the aem-clientlib-generator plugin to move the compiled CSS, JS and any resources into the ui.apps module. The aem-clientlib-generator configuration is defined in clientlib.config.js. 
Try to check below few things:

1. You have "aem-clientlib-generator" configuration in place for clientlib creation. The file that contain this info. is clientlib.config.js.

2. Your clientlib directory path is mentioned in clientlib.config.js which will ensure the correct directory where the clientlib has to be generated.

3.Once all of the above is done try to run "npm run build" on your FE module.


Thanks
Tarun

View solution in original post

5 Replies

Avatar

Community Advisor

@SRC_AEM_DEV 

 

Please validate following.

- Delete the clientlibs folder from ui.apps

- Build ui.frontend module

- Check if the clientlibs folders (with required files) is created in ui.apps

- Assure filter.xml of ui.apps is configured to deploy the clientlibs folder

- Deploy ui.apps

- Verify the files in CRXDE

 

Please cross-check, in which step you are noticing a discrepancy


Aanchal Sikka

Avatar

Correct answer by
Community Advisor

HI @SRC_AEM_DEV ,

The is mostly happening because ui.frontend module not leveraging the aem-clientlib-generator plugin to move the compiled CSS, JS and any resources into the ui.apps module. The aem-clientlib-generator configuration is defined in clientlib.config.js. 
Try to check below few things:

1. You have "aem-clientlib-generator" configuration in place for clientlib creation. The file that contain this info. is clientlib.config.js.

2. Your clientlib directory path is mentioned in clientlib.config.js which will ensure the correct directory where the clientlib has to be generated.

3.Once all of the above is done try to run "npm run build" on your FE module.


Thanks
Tarun

Avatar

Level 10

Please try once using below command at root folder, it will work

Whole project: mvn clean install -PautoInstallPackage

 

Follow below link for more details

https://medium.com/@toimrank/aem-clientlibs-css-and-js-6fda52c4e26f

Avatar

Community Advisor

Hi @SRC_AEM_DEV 
Please  check below points

  1. Clientlib Configuration: Ensure that the clientlib configurations in the ui.apps module are correctly set up to include the frontend resources. Check the clientlib folder in the ui.apps module and verify that the necessary CSS and JavaScript files are included in the clientlib definition.

  2. Maven Build Order: Confirm that the Maven build order is correct. The ui.apps module should be built before the ui.frontend module. Check the pom.xml files in both modules and ensure that the ui.apps module is listed before the ui.frontend module in the build order.

  3. Check Maven Profiles: Double-check the Maven profiles used during the build process. Make sure that the correct profiles (autoInstallPackage and autoInstallSinglePackage) are being used for the ui.apps and whole project builds, respectively. Verify that the profiles are correctly configured in the pom.xml files.

  4. Verify Build Output: After running the Maven build commands, check the build output to ensure that the frontend resources in the ui.frontend module are being packaged correctly. Look for any error messages or warnings related to the frontend build process.

  5. Check AEM Logs: Review the AEM logs to see if there are any error messages related to the deployment of the frontend resources. Look for any log entries that indicate issues with the clientlibs or frontend resources not being loaded.

  6. Clear AEM Cache: If the changes are not reflecting even after a successful build, try clearing the AEM cache. This can help ensure that the latest version of the clientlibs is being loaded by the AEM instance.



Avatar

Administrator

@SRC_AEM_DEV Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni