Hi everyone! I’m new in the ruby on rails world and now the rails 8 beta is up. Today i was started with a new application in the beta and i try to add bootstrap without importmaps and sprockets with the default assets pipeline propshaft but i dont found any guide or something like that for configure it. Anybody know how can i do this?
Welcome, hope you have fun with Rails!
rails new myapp --css bootstrap should create a new app configured with bootstrap, propshaft, and importmaps. It also uses cssbundling-rails to compile Bootstrap’s sass files to css. I don’t know if there’s any guide but maybe you can have a look at cssbundling-rails’s README. Basically once you create a new app you can run bin/setup to install dependencies and launch all the rails and css builder processes. Or if your dependencies are already installed you can run bin/dev.
I’m trying to do the same @jeromedalbert but it generates an error though: Building new rails app with --css=bootstrap fails · Issue #158 · rails/cssbundling-rails · GitHub - can you spot what goes wrong? It seems to expect node to be installed - but isn’t that the whole point with propshaft to avoid it or? 
- but if node is indeed still needed, I guess the problem is, that the devcontainer does not install node…?
Hmm I don’t use rails-new myself so I can’t say for sure why you get that npx error inside a devcontainer; might be a bug indeed!
I’m not super well versed into this but I think node is currently needed for --css bootstrap because bootstrap uses sass, so cssbundling-rails uses sass’ npm package to compile that sass into css (you can check your generated package.json to see how it’s all tied together). It also uses the postcss npm package with autoprefixer, and nodemon to monitor sass changes. So with the way cssbundling-rails is setup at the moment it looks like you need node, but feel free to open an issue there if you think it could be avoided.
If you want a pure non-node option, I know that the --css tailwind option doesn’t use node at all.
This worked for me: That’s for a new rails app 8.0.0.beta1 with the classic esbuild/sass/bootstrap but you have to have node and yarn installed.
My node version : v22.9.0 My yarn version: v1.22.22
rails -v
gem list rails --remote --prerelease -e
gem install rails --version 8.0.0.beta1
gem update --system 3.5.22
rails -v
rails new rails_8_app -d postgresql -j esbuild -c bootstrap
cd new rails_8_app
./bin/bundle add cssbundling-rails
./bin/rails css:install:sass
That’s the generated Gemfile:
source "https://rubygems.org"
# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 8.0.0.beta1"
# The modern asset pipeline for Rails [https://github.com/rails/propshaft]
gem "propshaft"
# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"
# Use the Puma web server [https://github.com/puma/puma]
gem "puma", ">= 5.0"
# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"
# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"
# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"
# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
gem "cssbundling-rails"
# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"
# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ windows jruby ]
# Use the database-backed adapters for Rails.cache, Active Job, and Action Cable
gem "solid_cache"
gem "solid_queue"
gem "solid_cable"
# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false
# Deploy this application anywhere as a Docker container [https://kamal-deploy.org]
gem "kamal", ">= 2.0.0.rc2", require: false
# Add HTTP asset caching/compression and X-Sendfile acceleration to Puma [https://github.com/basecamp/thruster/]
gem "thruster", require: false
# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"
group :development, :test do
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
gem "debug", platforms: %i[ mri windows ], require: "debug/prelude"
# Static analysis for security vulnerabilities [https://brakemanscanner.org/]
gem "brakeman", require: false
# Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/]
gem "rubocop-rails-omakase", require: false
end
group :development do
# Use console on exceptions pages [https://github.com/rails/web-console]
gem "web-console"
end
My package.json generated file:
{
"name": "app",
"private": true,
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
"devDependencies": {
"esbuild": "^0.24.0"
},
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
"build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
"build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
"build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
"watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
},
"dependencies": {
"@hotwired/stimulus": "^3.2.2",
"@hotwired/turbo-rails": "^8.0.12",
"@popperjs/core": "^2.11.8",
"autoprefixer": "^10.4.20",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"nodemon": "^3.1.7",
"postcss": "^8.4.47",
"postcss-cli": "^11.0.0",
"sass": "^1.80.2"
},
"browserslist": [
"defaults"
],
"version": "0.0.0"
}
FYI, this seems related to: Rails new --css boostrap failed · Issue #31 · rails/rails-new · GitHub and [proposal] Add node and yarn installation logic to dockerfile by onshi · Pull Request #23 · rails/rails-new · GitHub too
You gotta be kiddin’ me!
To make this clear rightaway: I am very happy with Rails-8, I love it so far, and I do have a smile on my face. But this one deserves a rant.
Okay, I have an app (that is not yet fully completed) and a proper configuration for Rails-7.0. That uses gem bootstrap 5.2.3, gem sassc-rails, SCSS via sprockets, JS via importmap, rails-ujs via sprockets (7.0 didn’t have the *.esm.js file yet) and webpack as an external project feeding into ~/vendor.
Now for the great thing: I can do rails new, merge my app into the new tree, and then the only thing needed is to remove propshaft from the Gemfile - and everything works, can be deployed, is fine.
This is great! As I said, I love the Rails-8 experience so far.
Now for the next step: how to move to propshaft? Propshaft can not be run in parallel with sprockets (namespace collision). But, after switching, most things do already work out of the box, or with minor adjustment.
Bootstrap does not work. It requires sprockets. But the gem can be upgraded to 5.3.3, and then no longer requires sprockets. Very good.
The remaining question appears to be: how do I get my SCSS processed? At that point I came here, to find the command as quoted above.
Well, it does nothing. It does nothing because I have by default configured --skip-bundle - to stop the madness before it happens.
So I tried the other approach: rails css:install:bootstrap, And the madness happened.
Like this:
! Corepack is about to download https://registry.npmjs.org/npm/-/npm-11.0.0.tgz
? Do you want to continue? [Y/n]
Or this:
! The local project doesn't define a 'packageManager' field.
! For more details about this field, consult the documentation at https://nodejs.org/api/packages.html#packagemanager
And a whole bunch more of that ilk.
I am quite certain I don’t want any of this. I just want my existing SCSS files (which include bootstrap from the gem-tree as desired) to be used.
Then, reading through this whole terrifying output, I find two interesting lines, these:
run npm pkg set scripts.build:css:compile="sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" from "."
run yarn build:css:compile from "."
Wait — I might have a sass executable, from bootstrap requiring it…
Let’s give that one a try… going back into my former app-tree where none of the node madness has happened, and:
$ mkdir -p app/assets/builds
$ /ext/gems/3.2/gems/sass-embedded-1.83.1/exe/sass \
./app/assets/stylesheets/appstyle.scss:./app/assets/builds/application.css \
--no-source-map \
--load-path=/ext/gems/3.2/gems/bootstrap-5.3.3/assets/stylesheets
And voila! My app is up and proper! Some images and fonts missing - fixed with a slight syntax change; some colors missing - bootstrap upgrade issue.
So, that single commandline appears indeed to be all what I needed.
Let’s clarify: I am running Berkeley (FreeBSD), and Berkeley only, since 1995. We Berkeley guys are no fans of systemd. Even less would one appreciate substituting systemd with nodeJS, for no reason at all.
Sure, I have that node program installed, as a system tool to be used when needed, just like the cc compiler. Not as an environment (because there is /bin/sh for that).
Now if the remaining issue is only to call that command automated whenever the SCSS changes - there is a whole discussion on superuser with dozens of options:
Yes, I recognized that this thread here actually concerns new installations. But even then, installing this node_modules thing (and maintaining it, in addition to the gem tree) without utterly needing it, seems rather questionable to me.
And sorry for the rant, please don’t feel offended! This was just too grotesque to stay silent…