Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Clientlib generator not moving resources to ui.apps

Sandy91
Level 1
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
BrianKasingli
Correct answer by
Community Advisor
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

2 Replies
BrianKasingli
Correct answer by
Community Advisor
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

Sandy91
Level 1
Level 1
@Brian 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