#importmap-rails

[maxcobmara]

Rail 5 -> 7 upgrade, now with importmaps

I held off upgrading my Rails 4 & 5 apps due to the knowledge hurdle that is Rails 6 with Webpacker.

I have finally taken the leap to upgrade to Rails 7, I have sort of made things work so far by ignoring all the Rails way of doing things and called JS & CSS via <script> tags in headers.

Some things work, and some things don’t and troubleshooting is starting to be a bit tedious.

My default way for Rails 7 is esbuild however I have decided to do it using import-maps which behind the scenes is what I am doing already, except organised the Rails way

So the first gotacha is that import-maps does import the js, but not the css, anyway assuming you’ve successfully upgraded from Rails 5 to Rails 7 and your app is running, lets install import-maps first.

add

gem 'importmap-rails’

to your Gemfile

run

$ rails importmap:install

do note the file created via console output namely

app/javascript/application.js app/assets/config/manifest.js config/importmap.rb

I haven’t upgraded to Bootstrap 5 yet on this app so..

now install (pin) Bootstrap 4.2.6

$ bin/importmap pin bootstrap@4.2.6

add the lines to your app/javascript/application.js

//imports the bootstrap js libraries import 'bootstrap'; //adds a popup so you know js is working alert('Hello World from ImportMaps')

your config/importmap.rb should read

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js" pin "popper.js", to: "https://ga.jspm.io/npm:popper.js@1.16.1/dist/umd/popper.js" pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@4.6.2/dist/js/bootstrap.js"

next for the css part. you could if you wanted to either use the CDN Bootstrap CSS, or add it locally, but we’re rubyists and want fast so we add the bootstrap gem.

gem 'bootstrap', '~> 4.6.2’ #because still using Bootstrap 4

$ bundle install

rename your app/stylesheets/application.css to application.old note the contents mine was *= require custom *= require bootstrap *= require_compiled *= require_self

create app/stylesheets/application.css and add the following lines

@import "bootstrap"; @import "custom"; @import "compiled";

Finally upgrade your app/views/layouts/application.html.slim

from = stylesheet_link_tag 'application', media: 'all' = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

= stylesheet_link_tag "application", "data-turbo-track": "reload" = javascript_importmap_tags

Should work, but what do I know