Starting from scratch. (Not an existing Rails 7 application) https://mixandgo.com/learn/ruby-on-rails/how-to-install-bootstrap [3]

$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 [4]

$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... [5]

package.json has following code.

 

app/javascript/application.js has following code now.