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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 2

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
Level 4

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

View solution in original post

4 Replies

Avatar

Level 9

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 2

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
Level 4

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

Avatar

Level 9

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.