Bootstrap 5 + esbuild in Ruby on Rails 7

With the introduction of the new asset pipeline, many new tools are available for you to use.
So the question is, "How do you install Bootstrap in Rails 7?"
By the end of this video, you'll know two ways to install Bootstrap and how to fix a problem with the installer.
🎥 Join my new Practical Ruby on Rails For Beginners course here: mixandgo.com/r...
👉 Get my eBook: mixandgo.com/e...
Read the guide here: mixandgo.com/l...
#rubyonrails #rails7 #assetpipeline #bootstrap

[@alexax3888]

Great video, thanks for the detailed steps. I installed this on an existing ror app and after finishing the steps from the video I got the error "Error ActionView::Template::Error (Asset `application.js` was not declared to be precompiled in production." I could fix this by running the rails javascript:install:esbuild command again.

[@padavanocskos]

It's a very useful!

[@mixandgo]

Thank you

[@raulhespinosa]

Great video, I have exactly the same thing and dropdowns still not working...

[@mixandgo]

Thank you Raul. What isn't working?

[@JonathanVANDERBOSSE]

Actually creating a new rails app doesn't work with bootstrap + esbuild. Asset pipeline Propshaft or Sprocket choice doesn't matter.

[@EstoyProgramando]

Thanks, last time I worked on Ruby on rails 5 and now i have no idea what the hell happened to the asset pipeline. Keep going!

[@mixandgo]

There are new tools available now. Better tools ;)

[@gono_bf1]

I keep getting this error in development: Asset `application.js` was not declared to be precompiled in production. Declare links to your assets in `app/assets/config/manifest.js`. Not sure what to do, because if I include the application to the manifest file, the dropdown keeps not working.

[@mixandgo]

Hi Victor. No idea without some context.

[@ansellgabrieldelayre2630]

i have the same issue

[@ansellgabrieldelayre2630]

Asset `application.js` was not declared to be precompiled in production. Declare links to your assets in `app/assets/config/manifest.js`.

[@mixandgo]

@@ansellgabrieldelayre2630 have you looked at the article? mixandgo.com/learn/ruby-on-rails/how-to-install-bootstrap Maybe there's something you've missed there?

[@ansellgabrieldelayre2630]

@@mixandgo Thank you; it is now operational.

[@cakeintech]

This video is priceless it saved my project in under 5 minutes, Keep making these. 👏

[@mixandgo]

Glad to hear that 💪

[@fijikiji_prod]

Still works over a year later. Im following a course and it uses rails 6 and my app is in rails 7 and this saved me so much time. Quick and easy to follow

[@mixandgo]

Thank you.

[@yeurys1402]

i installed using the -js esbuild --css but the functions for the bootstrap navbar wont work. been trying for a while now.. pls help

[@mixandgo]

This video should fix that. If you need 1:1 help, you can book a call on my website: mixandgo.com/lp/book-call.

[@tofudeliverygt86]

Incredible production quality and content, thank you sir!

[@mixandgo]

You're too kind :) Thank you.

[@riversummer-o1z]

Thanks, I meet the problem when I using 'rails new -c bootstrap app1' command. Your video help me a lot.

[@matiasbg8747]

hey! how display form in bootsrap modals?...

[@mixandgo]

Check out this video: kzbin.info/www/bejne/jKXdhYeva5p4g7s

[@RicardoAmigoViolão]

The link to the course is getting a 500 error

[@mixandgo]

Thank you for the heads up. I've updated the link.

[@mr.schway]

where can I add custom css code? thank you

[@baingfx]

Thank you! It's very useful video and helps resolve my problem.

[@mixandgo]

Happy to hear

[@farsiteguide2735]

Thank you for video, but Im still stuck with same problem. Dropdown work sometimes, not always. On one site is random, cant see pattern. On other site dropdown does not work after I log in, or sometimes after I log out, but if I then refresh page, drop down works fine. I would be grateful if someone can help as Im having problem with this for weeks.

[@mixandgo]

It's probably because you are replacing the frame, instead of updating it?

[@farsiteguide2735]

tbh Im not sure how to update frame instead of replacing. Trying to get info about it on chatgpt, what I tried didnt work and some stuff was too complicated. @@mixandgo

[@justinkalish935]

Thank you! It works great! If anyone has issues just double check your files vs his. Sometimes a semicolon is added quickly. Sometimes you need to delete a little more.

[@justinkalish935]

To save someone hours of work. This tutorial worked for me in the past. However, I could not get it to work today. I tried for hours. This one works. kzbin.info/www/bejne/kGPKnZ-BaNeFabc&ab_channel=BenNguyen If someone is trying to use Heroku you have to push one step at a time to get it to work.

[@shuxun3451]

Thanks! Btw i have a question on a warning When i do javascript:install:esbuild it did fix the bootstrap dropdown menu but now my app gave preload error warning and make new request every page change Is it fine? Or is there any workaround?

[@mixandgo]

No idea. It should behave as you see in the video. So if it doesn't do that, then it's not fine.

[@shuxun3451]

​@@mixandgo after some dividing apparently the warning only appear after the javascript include tag on the application.html.erb, could it be because my ruby version that is 2.7.1? Or maybe conflict on turbo?

[@shuxun3451]

Also on new project with esbuild and bootstrap the error didnt show but the bootstrap dropdown dont work immediately until i do the esbuild install again but the warning is back after that

[@brainstorm2297]

i am still facing that problems (The asset "application.css" is not present in the asset pipeline.) plz sove this thanks 🙏🙏

[@AriefRizkyRamadhan]

Can try run rails assets:precompile

[@gnan6647]

@@AriefRizkyRamadhan Awesome rails assets:precompile resolved my issue. but this command should be added to the blog. else many of us don't know how to resolve this issue. for me, it took more than 4 days (learning it in my rest time) to resolve this. :) :)

[@kickedoutonthestreets]

You don't have any idea how this less than 5-minute video saved my deadline... THANKS!

[@mixandgo]

Happy to hear that :)

[@gregs2274]

What about having Bootstrap and staying with importmaps? How do you do that?

[@mixandgo]

There seems to be an issue atm with that setup (with Popper not working). Check out this thread: github.com/rails/importmap-rails/issues/65

[@РинатИмангулов-щ5г]

Thank you, you're the best!

[@mixandgo]

You're welcome :)

[@RichardNavarrete1]

I noticed you are using yarn 1.22.18, which is before the Yarn Plug'n Play. I upgraded to 4.10, which does use it, but it's making things difficult. For one, it adds "-load-path=node_modules" to my build:css:compile script, but does not build the node_modules folder, etc... it builds the pnp.cjs and accompanying loader. As a result, I'm getting Error: Can't find stylesheet to import. ╷ 1 │ @import 'bootstrap/scss/bootstrap'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^ directly when I try to run ./bin/rails css:install:bootstrap. I want to give PNP a try because it does sound like a good idea to embrace it, but it's not working for. What are your thoughts with that please?

[@mixandgo]

Haven't tried that yet. I'll let you know if I do.

[@RichardNavarrete1]

@@mixandgo I wound up giving up on PNP and going back go 1.22.18... much simpler. Also, I noticed that when I was using 4.10 / PNP that the console comments said it was experimental.

[@mixandgo]

@@RichardNavarrete1 makes sense. There are plenty of dependencies breaking in the latest versions of Rails. Adding one more doesn't sound very appealing to me :)

[@CD-zd6zr]

I keep getting /* Error: Can't find stylesheet to import. * , * 1 | @import 'bootstrap/scss/bootstrap'; * | ^^^^^^^^^^^^^^^^^^^^^^^^^^ * ' * app\assets\stylesheets\application.bootstrap.scss 1:9 root stylesheet */

[@mixandgo]

Have you ran ./bin/rails css:install:bootstrap ? I should create that file for you.

[@CD-zd6zr]

@@mixandgo that's the command that's giving me that error

[@mixandgo]

@@CD-zd6zr I just tried it again locally (Rails 7.0.4.2). Got no errors rails new proj_name bundle add cssbundling-rails ./bin/rails css:install:bootstrap