Sage 10 + Bootstrap JS

sage
1

Hi guys,
Its been sometime and due to a PC crash it finally prompted me to move to sage10 after being a very long (old) time user of the old roots 7 theme!

Hoping someone can point me in the right direction as I am not upto scratch on sage10 or the newer standards/pratices being used.

Got everything up and running and swapped out tailwind for bootstrap according to the docs: How to Use Bootstrap | Sage Docs | Roots however I cannot see any inclusion of bootstrap JS?

For the older theme I used to use overrides like this: https://discourse.roots.io/t/how-to-include-specific-needed-bootstrap-js-files/9690/3 and I have also added that to my sage10 package.json file (should i be doing that with sage10?) but it doesnt add anything into my theme…

Had a look around the discourse and i cannot find anything specific relating to my issue on how to add ALL of boostrap JS or specific JS files (I came accross this: https://discourse.roots.io/t/installing-sage-10-with-bootstrap-5/21284 but it doesnt help).

Can anyone shed some light on this please?

2

No!

For Sage 10 with Bud, please review the docs:

https://roots.io/docs/sage/10.x/installation/
https://bud.js.org/learn/getting-started
https://bud.js.org/learn/getting-started/adding-sass

Maybe also consider the latest Sage 11 with Vite?

1 Like
3

Hey @mikespainhower thanks for the quick input!

No!
I assume you mean for inserting via the json file!

For Sage 10 with Bud, please review the docs:

https://roots.io/docs/sage/10.x/installation/
https://bud.js.org/learn/getting-started
https://bud.js.org/learn/getting-started/adding-sass

I have read those BUT will give them a re-read n case i missed anything.
FYI, i should clarify I am using:

ubuntu dektop 22.04.5
volta 2.0.2
Yarn 4.6.0
node 22.14.0
composer 2.8.5
acorn 4.3
Got trellis up and running and when i use: trellis check
Checking Trellis requirements…
Required:

[✓] Python [>= 3.8.0]: 3.10.12

Optional:

[✓] Vagrant [>= 2.1.0]: 2.4.3
[✓] VirtualBox [>= 4.3.10]: 7.1.6r167084

all good.

And I can run yarn build successfully and it does add the bootsrap css style and no errors on the frontend… it just doesnt add the JS files so I can use for example the modal, canvas menu etc

Maybe I am missing something? and the re-read will show me!

Maybe also consider the latest Sage 11 with Vite?

Didnt think that was stable yet?

I did follow the install instructions and it added the latest avliable version (1 week ago) which was sage 10… I guess once I figure out this current issue then the next project I will add sage11 (replaced vite for bud to use sage10 as per install instructions)…

4

Sorry, but i think you’re completely off the rails here. I can’t help.

5

@mikespainhower My apologies, maybe i misunderstood your helpful comment and struck a nerve, not my intention at all. All go thorught the docs again. Thank you

6

You can find the old Bootstrap guide (for Sage 10) at:

1 Like
7

@mikespainhower Appreciate that, will read that too. Thank you.

8

@mikespainhower Many thanks. This was the missing part that I didnt have. Adding in the JS as per the git hub repo docs has fixed my issues.

This wasnt listed (or that git link listed) anywhere in the guide or docs on the roots site especially the How to Use Bootstrap | Sage Docs | Roots which is why i missed it initially.

The sage docs guide: https://roots.io/docs/sage/10.x/installation/ doesnt work and its a 404…

Thanks for the help. If anything i got me to spend some time reviewing the bud guides (that may be irrelevant seeinsg as your moving to vite?!).

9

On How to Use Bootstrap | Sage Docs | Roots, there’s a link to https://getbootstrap.com/docs/5.2/getting-started/vite/.

From there, you can see examples like:

import { Tooltip, Toast, Popover } from 'bootstrap';

@AmirFarid I strongly suggest you use Sage 11 with Vite considering you just started a new project.

2 Likes
10

@ben thank you.

Actually when i started again i used the deleopment tag when installing sage and unknown to me it added the latest 11 version. I got confused by he docs and refernce to bud trying to figure out how to use it with that NOT understanding that version 11 doesnt use it! (thats where some of my potentially confusing comments previously may have arisen! Sorry).

SO atm i have 2 projects, one using v11 and another v10.

I assumed v11 was still work in progress and not stable? most likely if its stable? ill move to that.

Just have another enviroment issue to sort/get my head round (will post another thread) and then I can get cracking full speed.

11

Where are you getting this from?

  1. There’s a stable v11 release
  2. All the docs are for v11
  3. There’s a blog post announcing v11

I don’t understand what we could have done to make it more clear that v11 is stable

13

@ben I installed a good few weeks back before the announcement maybe thats why. There was stuff i read for bud and i didnt get it and saw vite which i didnt undersnat (using the main-dev command on install)

Anyway, as you can see at some stage i have got confused somewhere and made a boo-boo of things (as mike pointed out, sorry) I’ll start again, thin thats the best way seeing as I have just started anyway. Maybe that will sort my acorn issues out that I am having!