Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Added Bootstrap but running "mvn clean install PautoInstallBundle" in ui.frontend resets my clientlibs in/apps.

Avatar

Level 4

Actually, I needed to add/include Bootstrap 5 in my project referring this post. And worked.

Solved: How to enable/add Bootstrap version 5 in my projec... - Adobe Experience League Community - ...

But whenever I am running "mvn clean install -PautoInstallBundle" in ui.frontend after creating .scss for my component, my clientlibs in /apps get reset & bootstrap support is gone. So, then again I've to add bootstrap files in clientlib.
I am still learning, so I know I'm doing something wrong here. Thus, please tell me how to add bootstrap in my project.
Thanks!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @sesmic , you need to add bootstrap5 as a category name, follow this article if it helps

 https://medium.com/adobetech/creating-a-bootstrap-carousel-from-core-components-8df7b2173d25 

 

 

~Aditya.Ch

Thanks,

Aditya Chabuku

View solution in original post

4 Replies

Avatar

Community Advisor

Whenever you will build ui.frontend, it will overwrite the clientlib-site and clientlib-dependency. If you are adding bootstrap as a separate library then you can update clientlib-dependency with category of bootstrap 5 clientlibs.

You can refer code of ui.frontend/clientlibs.config.js, it is creating clientlibs inside ui.apps. Refer sample code for addition of bootstrap5

 

name: 'clientlib-dependencies',
categories: ['project.dependencies'],
dependencies: ['bootstrap5'],

Add bootstap5 JS and CSS file in separate clientlibs in ui.apps/project/clientlibs/bootstrap5.

 

Also this command is to install bundle of project : mvn clean install -PautoInstallBundle

Refer this document for correct commands : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...

 

Avatar

Level 4

Thanks for the reply.
I did as you said & bootstrap js & css were also added to clientlibs. But bootstrap isn't working. To add "dependencies: ['bootstrap']" don't we need to add categories = bootstrap5 to that folder?

Avatar

Correct answer by
Community Advisor

Hi @sesmic , you need to add bootstrap5 as a category name, follow this article if it helps

 https://medium.com/adobetech/creating-a-bootstrap-carousel-from-core-components-8df7b2173d25 

 

 

~Aditya.Ch

Thanks,

Aditya Chabuku

Avatar

Community Advisor

Yes, you have to create a separate clientlibs with categories=bootrstap5(any other name you want to keep) as I mentioned above i.e. ui.apps/project/clientlibs/bootstrap5. You have to add this in your codebase to avoid getting removed after deployment.