Expand my Community achievements bar.

SOLVED

Clientlib generator not moving resources to ui.apps

Avatar

Level 1

Hello Everyone,

 

We have a project using the frontend module and we are using few resources for fonts. I see that they are in the dist folder but when clientlib generator moves the libs to ui.apps only css and js are being moved. I do see the config for clientlib.config.js which has the resources configured in there. did anyone see this issue before?

 

Thanks!

~Sandy

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Sandy91 here's how the flow should be like:

  1. run: webpack build prod  
  2. webpack transforms and builds the code, then minifies the css and js files and stores it directly into the DIST folder (configured by the webpack config).ou 
  3. next, webpack invokes the clientlib-generator (using the clientlib.config.js) which copies files from the DIST folder to the destination clientlibs folder into the ui.apps maven module (example: /apps/my-site/clientlibs/frontend-clientlib).
  4. done.
  5. Now you can use your maven skills to deploy the code into your AEM instance. Once deployed, your front-end code can be accessed from /etc.clientlibs/my-site/clientlibs/frontend-clientlib.css|js

Of course, all this can be automated when you are utilising the maven front-end plugin.

Look at the latest AEM Maven archetype project's example of how they've implemented "mvn build" automation with the front-end project. Running the build and deploy maven command will utilise the maven front-end plugin, which will automate the initiation of the webpack build command, and finally deploy ui.apps, and all necessary maven modules directly into your AEM environment. , https://github.com/adobe/aem-project-archetype/tree/master/src/main/archetype/all.

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

@Sandy91 here's how the flow should be like:

  1. run: webpack build prod  
  2. webpack transforms and builds the code, then minifies the css and js files and stores it directly into the DIST folder (configured by the webpack config).ou 
  3. next, webpack invokes the clientlib-generator (using the clientlib.config.js) which copies files from the DIST folder to the destination clientlibs folder into the ui.apps maven module (example: /apps/my-site/clientlibs/frontend-clientlib).
  4. done.
  5. Now you can use your maven skills to deploy the code into your AEM instance. Once deployed, your front-end code can be accessed from /etc.clientlibs/my-site/clientlibs/frontend-clientlib.css|js

Of course, all this can be automated when you are utilising the maven front-end plugin.

Look at the latest AEM Maven archetype project's example of how they've implemented "mvn build" automation with the front-end project. Running the build and deploy maven command will utilise the maven front-end plugin, which will automate the initiation of the webpack build command, and finally deploy ui.apps, and all necessary maven modules directly into your AEM environment. , https://github.com/adobe/aem-project-archetype/tree/master/src/main/archetype/all.

Avatar

Level 1
@Deleted Account Thank you for the clean process notes. My project was created with the new archetype and everything was automated. I see the js and css getting moved to ui.apps by the aem clientlib generator but not the resources. They are in the dist folder but not under ui.apps

Avatar

Level 1

@Sandy91 Did you have any luck with the issue? I am noticing when running "npm run watch" command inside the ui.frontend directory, the /resources files are copied to the aem instance correctly, but then after making a change to any file under /webpack directory, and the build is re-triggered, the contents from /resources directory are not moved to the aem deployment package, and therefore are missing from aem.