Starting from scratch. (Not an existing Rails 7 application) https://mixandgo.com/learn/ruby-on-rails/how-to-install-bootstrap
$rails new blog -j esbuild --css bootstrap
Error @hotwired/turbo@7.2.4 The engine node is incompatible with this module.
Expected version >= 14. Got 12.22.9
Now I need to upgrade node version. https://phoenixnap.com/kb/update-node-js-version
$node -v => v12.22.9
$sudo npm cache clean -f
$sudo npm install -g n
$sudo n stable
$node -v => still shows old version
$hash -r
$node -v => v18.13.0
Try creating Rails 7 app with Bootstrap
$rails new blog -j esbuild --css bootstrap
This is the part of log.
info All dependencies
└─ @hotwired/stimulus@3.2.1
Done in 0.49s.
rails css:install:bootstrap
Build into app/assets/builds
exist app/assets/builds
identical app/assets/builds/.keep
File unchanged! The supplied flag value not found! app/assets/config/manifest.js
Stop linking stylesheets automatically
gsub app/assets/config/manifest.js
File unchanged! The supplied flag value not found! .gitignore
File unchanged! The supplied flag value not found! .gitignore
Remove app/assets/stylesheets/application.css so build output can take over
remove app/assets/stylesheets/application.css
Add stylesheet link tag in application layout
File unchanged! The supplied flag value not found! app/views/layouts/application.html.erb
append Procfile.dev
Add bin/dev to start foreman
identical bin/dev
Install Bootstrap with Bootstrap Icons and Popperjs/core
create app/assets/stylesheets/application.bootstrap.scss
run yarn add sass bootstrap bootstrap-icons @popperjs/core from "."
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 20 new dependencies.
info Direct dependencies
├─ @popperjs/core@2.11.6
├─ bootstrap-icons@1.10.3
├─ bootstrap@5.2.3
└─ sass@1.57.1
info All dependencies
├─ @popperjs/core@2.11.6
├─ anymatch@3.1.3
├─ binary-extensions@2.2.0
├─ bootstrap-icons@1.10.3
├─ bootstrap@5.2.3
├─ braces@3.0.2
├─ chokidar@3.5.3
├─ fill-range@7.0.1
├─ glob-parent@5.1.2
├─ immutable@4.2.2
├─ is-binary-path@2.1.0
├─ is-extglob@2.1.1
├─ is-glob@4.0.3
├─ is-number@7.0.0
├─ normalize-path@3.0.0
├─ picomatch@2.3.1
├─ readdirp@3.6.0
├─ sass@1.57.1
├─ source-map-js@1.0.2
└─ to-regex-range@5.0.1
Done in 2.20s.
insert config/initializers/assets.rb
Appending Bootstrap JavaScript import to default entry point
append app/javascript/application.js
Add build:css script
run npm pkg set scripts.build:css="sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" from "."
run yarn build:css from "."
yarn run v1.22.19
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
Done in 0.91s.
Now I started the app.
$cd blog
$bin/dev
It showed Rails startup page.
$rails generate controller Articles index
Then fix config/routes.rb to add root path.
root "articles#index"
Now the app page shows up.
Application now has Rails 7, Bootstrap, @hotwired. But it still does not have Font awesome. Looks like the application does not have Importmap because there is no file config/importmap.rb (Isn't it supposed to be default in Rails 7?)
TODO: Use importmap with Bootstrap https://dev.to/coorasse/rails-7-bootstrap-5-and-importmaps-without-nodej...
package.json has following code.
app/javascript/application.js has following code now.