Expand my Community achievements bar.

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.