[icon name=”square” prefix=”fas” class=”jfb-blue”] Intermediate
[icon name=”gem” prefix=”fas” class=”jfb-red”] Rails
For getting Bootstrap to work with Rails 7, you need to choose between ImportMap, JSBundling/CSSBundling, Shakapacker, or Vite Rails as your Javascript packager or paradigm. (Note: Importmaps is a paradigm for working with Javascript, but it isn’t actually a “packager.” The other 3 options can be considered “packagers.”)
HOW DO I CHOOSE A JAVASCRIPT PACKAGER OR PARADIGM?
| ImportMaps | JSBundling | Shakapacker | Vite Rails | |
|---|---|---|---|---|
| Pros | • Newest paradigm. • Quickly/easily add importable JS to your app. • Default for Rails 7 | • Can use ESBuild, Webpack, or Rollup as the compiler. • Can use ESBuild, a faster alternative to Webpack. • A good, quick way to use node packages via Node Package Manager or Yarn. • A good, quick way to get Typescript or JSX compiling with Babel. | • Offers a complete deployment & development pipeline for developing with Typescript and React (including JSX) | • An excellent development & deployment environment for modern JS: React, Vue, Solid JS, etc • Great for Rails-API apps • Also strong options for building a blended Rails-React app (keeping some parts of Turbo + Stimulus with React Components) |
| Cons | • Only works for importable JS (Javascript or Typescript written as ES Modules.) • Does not bundle or build compiled Javascript (like something you would compile with Bable, e.g. Typescript/React) | • Does not offer a complete solution for building images within React or React-on-Rails apps. • Too many node dependencies can make your app unwieldy. | • Uses Webpack, which can be slow to compile with many npm dependencies. • Too many node dependencies can make your app unwieldy. | • Too many node dependencies can make your app unwieldy. |
Once you decide, the fastest way to get started with a new Rails 7 app is to use my Rails Quick Scripts — which are easy to use and get you up & running right away, leaving you with excellent sane defaults and instantaneous basic configuration.
Want Importmap for my Rails 7 app with Bootstrap?
YES?
Rails 7: ImportMap-Rails with Bootstrap, Stimulus, Turbo (Long Tutorial).
Rails 7: ImportMap-Rails with Bootstrap, Stimulus, Turbo, (Quick Setup)
NO?
Want JSBundling instead? See Up & Running JS Bundling.
If you want Shakapacker, see Shakapacker Setup.
Can I use Bootstrap or Tailwind with any paradigm?
Yes, Bootstrap or Tailwind will work with either ImportMap-Rails, JSBundling, Shakapacker, or Vite rails.
Can I use Turbo with any paradigm?
Yes, Turbo will work with either ImportMap-Rails, JSBundling, Shakapacker, or Vite rails.
Can I use Stimulus with any paradigm?
Yes, Stimulus will work with either ImportMap-Rails, JSBundling, Shakapacker, or Vite Rails.
How much should I use the asset pipeline, Sprockets or Propshaft?
The asset pipeline (sprockets) remains the default Rails deployment paradigm for loading CSS through the stylesheet_link_tag Rails helper in your layout file, even through Rails 7.0, although it is being phased out in favor of Propshaft.
However, if you have a more React-style application tree with styles defined inline or in your JS code, you can use that paradigm instead if you are using Shakapacker or Vite Rails.
Starting with Rails 7.0, you can upgrade from Sprockets to Propshaft, the next generation of Rails asset pipeline.
Can I use React and TypeScript with any paradigm?
No, React and Typescript will not work with ImportMap-Rails. Typescript can be easily added to a JSBundling app, as long as you add the Typescript watcher and reconfigure your Yarn script.
You can use React with JSBundling, but it requires some modification to support features like server-side rendering. For more about JSBundling and React, see this post.
To support SSR, Shakapacker comes ready to go for including assets in Javascript, works in tandem with the react-rails gem, and is an ideal React & TypeScript development environment on top of Ruby on Rails 7. Vite Rails is also an excellent choice for React, Vue JS, Solid JS, or any other Rails API app where you want a JS paradigm to control the front end.
What if I have an API-only Rails app?
If you have an API-only Rails app, you’ll have to decide whether to deploy React (or your other frontend framework) on top of Rails or separately from your Rails app. “On top of” means your React code lives inside your Rails app folder (in app/javascript/), and gets deployed along with your Rails app. This is generally the best strategy for React-Rails apps.
Alternatively, you can deploy your React app completely separately from your Rails app. Still, this setup involves a lot of headaches around (1) timed deployments, (2) a lack of end-to-end testing options, and (3) getting the CORS settings right across two domains (the Rails domain and the React domain). Generally, a single Rails app with the JS frontend bundled within it is the best strategy.