Rails 6, Ruby 3, Bootstrap 5 and Hotwire
April 18, 2021
Extending the blogpost from Bootrails with Hotwire:
All the fancy new things (as of when I'm writing this TIL):
$ ruby --version
3.0.1
$ rails --version
Rails 6.1.3.1
$ rails new MyApp --skip-bundle --skip-coffee --database=postgresql
$ cd MyApp
# Add Hotwire-rails to Gemfile
$ echo "\ngem 'hotwire-rails'" >> Gemfile
$ bundle
$ ./bin/rails webpacker:install
# lets keep javascript and stylesheets in a app/frontend folder
$ mv app/javascript app/frontend
# add bootstrap dependencies
$ yarn add bootstrap@next
# when prompted, choose the latest version here:
$ yarn add @popperjs/core@next
Edit ./webpacker.yml and modify source_path:
# Inside webpacker.yml
default: &default
source_path: app/frontend # Change here
Add files to load bootstrap:
$ mkdir app/frontend/js && touch app/frontend/js/bootstrap_js_files.js
$ touch app/frontend/packs/application.scss
# Warning, this removes application.css (which we replace with application.scss)
$ touch app/assets/stylesheets/.keep && rm app/assets/stylesheets/application.css
// inside app/frontend/js/bootstrap_js_files.js
// enable plugins as you require them
// import 'bootstrap/js/src/alert'
// import 'bootstrap/js/src/button'
// import 'bootstrap/js/src/carousel'
import 'bootstrap/js/src/collapse'
import 'bootstrap/js/src/dropdown'
// import 'bootstrap/js/src/modal'
// import 'bootstrap/js/src/popover'
import 'bootstrap/js/src/scrollspy'
// import 'bootstrap/js/src/tab'
// import 'bootstrap/js/src/toast'
// import 'bootstrap/js/src/tooltip'
// inside app/frontend/packs/application.js
// Add this line before import Rails …
import '../js/bootstrap_js_files.js'
// inside app/frontend/packs/application.scss
// Import Bootstrap v5
@import "~bootstrap/scss/bootstrap";
Setup Hotwire
# create ./bin/bundle; currently required for the Remove Turbolinks task by Stimulus
# see: https://github.com/hotwired/stimulus-rails/issues/55
$ bundle binstubs bundler
$ ./bin/rails hotwire:install
Modify app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<!-- Warning !! ensure that "stylesheet_pack_tag" is used, line below; also change turbolinks to turbo for hotwire -->
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
Check if everything compiles:
$ ./bin/rails assets:clobber
# You can probably ignore the warnings :)
$ ./bin/rails webpacker:compile