For almost 20 years now, Rails has been a synonym for effectiveness and excellent results, which is why we haven't hesitated to call it the perfect ally for startups. One reason Rails has stood the test of time is sheer boldness. Again and again, devs have shown they don't shy away from undertaking radical changes to give developers better tools.
Today we will walk you through different ways to use Import Maps, with real libraries and examples. Consider that while it works great to import js, Import Maps is not so straightforward when the library includes css code. Let's begin by taking a look at the easier case.
If you want to install a library using a JSPM CDN you simply need the pin command and the library name. Run:
./bin/importmap pin firstname.lastname@example.org
Consider that there will be some specific cases in which you will have to use a different CDN. For example, for chart.js you can run:
./bin/importmap pin email@example.com --from jsdelivr
And that's it. As you can see, it's quite as simple as promised!
Now let's move on to the slightly more challenging case of using Import Maps in libraries with css.
When importing these types of libraries, you can choose one of the following paths:
To exemplify with a step by step guide, we will use bootstrap:
Add to your gemfile:
gem 'bootstrap', '~> 5.1.3'
And then run bundle install.
Add boostrap to app/assets/stylesheets/application.scss:
// Bootstrap @import "bootstrap";
In config/initializers/assets.rb add:
Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)
In config/importmap.rb add:
pin "popper", to: 'popper.js', preload: true pin "bootstrap", to: 'bootstrap.min.js', preload: true
import "popper" import "bootstrap"
And that would be all. However, keep in mind the words of the Immortal Bard: All that glitters is not gold. Since not all gems are updated, this means that if, for example, you are trying to use a gem for the “simplebar” library, you will find that the only gem available has no stars and is not actively maintained.
In this case, we will use simplebar for our example
First, download simplebar js file from: https://ga.jspm.io/npm:firstname.lastname@example.org/dist/simplebar.esm.js
After this, download also css file from:
Then copy it to vendor/stylesheets/simplebar.css. (Note: you may need to create vendor/stylesheet folder.)
Now, add vendor stylesheet to the assets paths, and add to config/initializers/assets.rb the line below:
Rails.application.config.assets.paths << Rails.root.join("vendor", "stylesheets")
To pin simplebar., add the line below to config/importmap.rb:
pin "simplebar", to: "simplebar.js"
Add simplebar to app/assets/stylesheets/application.scss:
In case you don't mind maintaining your libraries manually, we firmly recommend you use this second option.
We hope this guide will become a useful and handy tool whenever you want to use Import Maps to load JS libraries in your web application. As we said at the beginning, this will allow you to avoid big bundled files and instead serve multiple smaller files, with the advantage of easier cache and control.
If you want to find more guides and tips for developers, as well as other interesting articles for entrepreneurs, keep browsing our blog.