Our goal: remove nodejs
As many other people in the Rails community, I started setting up brand new Rails 7 projects, and I need to re-learn, at least partially, how to bundle the assets and distribute them.
I never fell in love with TailwindCSS, and therefore I usually setup my Rails apps to use Bootstrap as default.
I have to say that
esbuild does already a pretty cool job compared to
webpack to simplify our lives, and make the process faster, but as long as I don't need bundling, I'd like to not have a package.json file and being dependent on nodejs for my Rails app.
A pure and simple sprockets + importmaps app with no Foreman, no
yarn build --watch stuff.
By default, Rails 7 provides a new option
but with my great surprise, this option adds both
Not as expected. Not what I want.
How to configure Rails and Bootstrap without nodejs
Default is not what I want, but I can still reach the goal and here I'll explain how:
Stick with just
rails new myapp
This will setup exactly the tools I want:
importmaps. It will also setup automatically for me stimulus and turbo, which is great because I use them most of the time anyway.
bootstrap gem and enable the gem
sassc-rails in the Gemfile. This will allow us to compile bootstrap from SCSS without node.
You can simply import Bootstrap styles in
// here your custom bootstrap variables... @import "bootstrap";
That's it for the CSS part. Running
rails assets:precompile will generate what you want.
- Precompile the bootstrap.min.js that comes with the gem, by adding to
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )
- pin the compiled asset in
pin "popper", to: 'popper.js', preload: true pin "bootstrap", to: 'bootstrap.min.js', preload: true
- Include bootstrap in your
import "popper" import "bootstrap"
I prefer this approach rather than pinning a CDN because we avoid diverging versions of Bootstrap.
This is all you need to have Bootstrap fully working on Rails 7 without using node.
If you like this guide you can follow me on Twitter.
Top comments (32)
Great write up Alessandro. What I don't understand is if import maps loads libraries via CDN, why is the Bootstrap gem still needed? You could load Bootstrap straight into the header without all this hassle.
Of course, if you don't need to customise bootstrap, then you can load everything from CDN.
Tried the whole day to get Bootstrap working with Rails 7.
This method works awesome.
Excellent and helpful article. Thanks Alessandro
Thank you. Clears up a lot of confusion. The dependancies and/or defaults of the Rails 7 options aren't clear.
Another confusion for me. Is Sprockets the way forward or?
Probably would help if you showed all your changed or added code. Would help avoid the confusion @ochupa faced.
I think this could be made simpler.
I believe the bootstrap-rubygem already injects in the assets throughs sprockets the
bootstrap.min.jsand SCSS files, and also the
poper.jsthrough the dependency popper_js-rubygem.
So, in terms of the JS files, all we need to do, after bundeling the bootstrap-rubygem, is import them in the
I have this working in development.
Thanks. This is simpler.
In application.js :
give this error for me on browser :
full error log:
I miss the
bundle add bootstrap
Hi, I tried this but the CSS is not working. I get this error from the browser console:
ok, seems like I needed to rename "application.css" to "application.scss"
Hey Alessandro, I'm trying to add 'bootstrap-rails' gem but getting error - Could not find gem 'bootstrap-rails' in rubygems repository rubygems.org/ or installed locally.
Could help with the proper name of bootstrap gem?
I think he is talking about github.com/twbs/bootstrap-rubygem. Therefore the gem name is just 'bootstrap'.
Correct me if I'm wrong.
Thanks for a helpful, concise post.
As I'm stuck on Bootstrap 4, I experienced problems with jquery and also struggled to get the
popper.jsbundled with the
bootstrap(@4.5) gem to work.
Solved using the following pins (the CDN for jquery is important as mentioned on SO above):
Thanks for the guide! I believe it should be
Actually it's not. The bootstrap gem dependes on the popper_js gem
Don't think this really "works without node" - bootstrap gem does not work if there is no execjs runtime (just try removing executable permission from your NodeJS installation on the system) because autoprefixer needs it. Is there some magic way to force it to use something else?
Good point! Yes, you can also use another runtime: github.com/ai/autoprefixer-rails#u...
First of all, thanks Alessandro. It's clear and gets direct to the point. Unfortunately, I couldn't make it work. I created a new project to test this out and followed exactly the steps described here. After that, I've added a simple navbar from Bootstrap examples, that contains a dropdown (making it need bootstrap.js). The styles look good but the dropdown doesn't work. Here the repo if anybody wants to take a look and have an idea on what's wrong: github.com/matiasalbarello/test-im...
If anybody has a working example would be great! Please share if so :)
In case it helps someone: I was using the wrong navbar example from bootstrap page (using from version 4 instead of 5). Also found that these steps are followed in this app template: railsbytes.com/public/templates/V2...
Question: Can i just rename the 'application.css' to 'application.scss' (I did and it seems ok but should i think of anything else when doing so?)
As i understood, you have to decide which rail you choose: you cannot use importmap and add Shakapacker or jsbundling later for using it alongside importmap.
How do you think?